Campo de pesquisa dentro do select html? dropdown personalizado!
criação de sites > campo de pesquisa dentro do select html? dropdown personalizado!
Se você é como eu que não curte muito aquele select simples que vem padronizado no html, hoje vou te ensinar como criar um campo de pesquisa dentro do select html, isso mesmo com dropdown personalizado para você melhorar a sua criação de sites!
Para iniciar você deve ter um arquivo index.html ou index.php, em Next.js usando React.js também funciona basta seguir o padrão e ter um arquivo com a <Head>.
já com o arquivo html feito vá até a tag HEAD e adicione os scripts abaixo antes do fechamento da HEAD:
<script src="https://dicadodesenvolvedor.com.br/script/select-busca.js"></script>
Feito isso seu arquivo já estará com a estrutura que criamos para implementar o campo de busca dentro do select, agora o processo é mais complicada.
Vamos criar uma tag html chamada <input> responsável pela pesquisa que ficará desse jeito:
Nesse ponto eu criei alguns atributos específicos, para a função eu utilizo a classe "selectHTML" ela permite que eu pegue o valor do input e faça a pesquisa e também realizar o hide() e show() dos elementos a seguir:
<option data-input='#selectHTML1' data-div='.divOp' class='optionT pesquisado'>Gazolina</option>
<option data-input='#selectHTML1' data-div='.divOp' class='optionT pesquisado'>Alcool</option>
<option data-input='#selectHTML1' data-div='.divOp' class='optionT pesquisado'>Gazolina</option>
</div>
Vamos analisar esse código repare que no input eu tenho um atributo html "data-div", ele me permite saber qual é a div que está os option para que eu consiga criar a pesquisa no interior do select, a classe "divOp" que está no option serve para o hide() e show() e a classe "divOpN" serve para estilizar no CSS. Nos options eu tenho dois atributos "data", um é a classe da div e o outro é do input, o "data-input" permite que eu pegue o valor do option selecionado e jogue no input de busca, já o "data-div" serve apenas para eu ocultar após o clique no option.
agora vamos para o CSS, está na hora de estilizar o input que funciona como um select e a div com os options, seguimos assim:
padding: 10px;
transition: 0.5s all;
cursor: pointer;
}
.optionT:hover {
background-color: aliceblue;
}
.divOpN {
box-shadow: 0px 1px 5px #eee;
padding: 20px;
margin-top: 5px;
display: none;
position: absolute;
width: 90%;
max-height: 200px;
overflow: auto;
background-color: white;
z-index: 100;
}
A classe ".optionT" eu adiciono apenas um padding, transition e cursor, mais isso é opcional, a classe ".divOpN" tem alguns itens que não podem faltar que são, "Display" ele deve ser "none" para que possamos dar um "show" ou "display:block", "position: absolute" me permite deixar ele de modo que o option não atrapalhe outro select ou campo de busca quando o assunto é design, recomendo que você utilize tudo que eu coloquei para ter um resultado igual ao meu na pesquisa do campo input.
Se você chegou até aqui parabéns basta testar seu projeto, graças ao jQuery e ao CSS podemos ter um select que funciona em todos os navegadores, do jeito que queremos, clique aqui para baixar o projeto de como criar barra de busca dentro do select html.
