Plugin Flexdatalist - Autocomplete com suporte ao
o HTML5 elemento é bastante útil no desenvolvimento de frontend moderno. No entanto, é um desses elementos que muitos desenvolvedores desconhecem.
Ele funciona em um campo de entrada onde você pode auto-sugira determinados valores para a entrada. A configuração padrão parece ok e nós cobrimos algumas dicas de codificação na criação de efeitos legais com os datalistas de sugestão automática.
No entanto, é muito mais fácil trabalhe com um plugin tal como Flexdatalist. isto suporta uma ampla gama de navegadores e permite que você personalizar totalmente o design do seu datalist.
Nem todo mundo tem necessidade de recursos de autocompletar e com datalists nativos em HTML5, você pode não se incomodar com um plugin. No entanto, Flexdatalist é talvez o melhor lá fora porque baseia-se em comportamentos datalist nativos adicionar:
- Suporte responsivo móvel
- Descrições extras para cada item
- Opções para várias seleções de uma só vez
- Manipuladores de eventos personalizados
Está tudo alimentado por jQuery, então você vai precisa de uma cópia da última versão para fazer isso funcionar. Isso também vem com sua própria folha de estilo CSS que você pode querer combinar em um único arquivo CSS para reduzir as solicitações HTTP.
Você pode encontrar instruções completas de configuração na página principal de demonstração que inclui Baixar links para os arquivos Flexdatalist.
É muito simples de configurar, com apenas uma linha de JavaScript. Por padrão, o plugin segmenta todas as entradas com a classe .flexdatalist, então apenas adicionar isso ao seu código deve ser suficiente para ver os resultados.
Você acabou de adicionar o elemento dentro do seu campo de entrada e Flexdatalist lida com o resto. Vai auto-estilo a lista, incluindo texto descritivo opcional.
A maneira mais simples de adicionar texto extra é através de um arquivo JSON que você pode anexar à sua entrada através de um atributo de dados.
Por exemplo, se você verificar a página de demonstração Flexdatalist, você encontrará uma “Países” campo de entrada com o atributo data-data = 'countries.json'. Isso faz referência a um arquivo remoto armazena todos os dados de entrada brutos externamente.
Muitos desses campos você pode abrandar a página um pouco. No entanto, não consigo imaginar muitos sites executando mais do que alguns desses formulários datalist em uma página, para não mencionar que mesmo com este plugin jQuery, eles são ainda bem rápido.
Para começar, apenas visite o repositório do GitHub e baixe uma cópia. Isso inclui um link para a página principal de demonstração que também tem documentação completa para configuração, opções de JavaScript e vários snippets de código de amostra para dar a volta.
