Como criar um datalista instantaneamente pesquisável

Listas suspensas são uma ótima maneira de fornecendo opções para um campo de entrada, particularmente quando a lista de opções disponíveis é longa. Um usuário pode escolher a opção que deseja digitando no campo, ou olhe através das opções que pode ser um jogo para o que eles estão procurando. Ser capaz de pesquisar as opções, no entanto, é a solução ideal.

Esse comportamento pode ser alcançado com o Elemento HTML que exibe sugestões de entrada para diferentes controles, como o tag. Contudo mostra apenas as opções disponíveis quando o usuário já digitou algo no campo de entrada.

Podemos tornar um campo de entrada mais utilizável se habilitarmos os usuários a acessar a lista completa de opções a qualquer momento durante o processo de entrada de dados.

Neste post, vamos ver como criar um lista suspensa que pode ser pesquisada a qualquer momento usando o tag é o mesmo que a identidade do tag - é assim que nos ligamos uns aos outros.

2. Faça o Datalist Visible

Por padrão, o Elemento HTML é escondido. Nós só podemos ver isso, quando nós começar a digitar uma entrada no campo o datalista é anexado ao.

No entanto, há uma maneira de "forçar" o conteúdo do datalist (ou seja, todas as suas opções) para aparecer na página da web. Nós só precisamos dar-lhe um adequado exibição valor da propriedade outro que não seja Nenhum, por exemplo display: bloco;.

 datalist display: bloco;

As opções exibidas ainda não são selecionáveis neste momento, o navegador só processa as opções encontra dentro do datalista.

Como já mencionado, devido ao comportamento embutido do elemento, parte das opções já aparecem e são selecionáveis, mas somente quando o usuário começa a digitar uma string na qual o navegador pode encontrar uma opção correspondente.

Também precisamos encontrar um mecanismo para fazer todos opções (na captura de tela acima exibida sob o datalist dropdown) selecionável a qualquer outro ponto do processo de entrada de dados - quando os usuários querem dar uma olhada nas opções antes de digitarem alguma coisa, ou enquanto elas já colocaram algo no campo de entrada.

3. Traga o Elemento HTML.

Nós vamos escolher o segundo método, como é mais simples, e é permitido usá-lo como um mecanismo de fallback em navegadores que não suportam o elemento. Quando um navegador não pode processar e exibir o datalist, ele processa o Tag HTML, o código se parece abaixo:

Datalist Combinado com Adicionando o múltiplo atributo para o tag, de modo que quando o usuário seleciona uma opção na lista suspensa, seu valor será exibido dentro do campo bem. / * quando o usuário seleciona uma opção do DDL, escreve no campo de texto * / select.addEventListener ('change', fill_input); function fill_input () input.value = opções [this.selectedIndex] .valor; hide_select (); Desvantagens A principal desvantagem desta técnica é a ausência de uma maneira direta de estilizar elemento com CSS (a aparência do e