Lista suspensa pesquisável

Por padrão o select box (ou lista suspensa) armazena informações inseridas no próprio arquivo HTML através das tags select. Mas você sabia que é possível ampliar as possibilidade desse componente e usá-lo para fazer pesquisas em tabelas apenas digitando as iniciais da informação desejada? Nesse artigo mostrarei como criar uma lista suspensa pesquisável.

Vamos utilizar requisições AJAX para pegarmos as informações do banco e atualizar na lista sem dar refresh na página toda. Mãos à obra?

No seu projeto, inclua as chamadas para os arquivos select2.min.css e select2.min.js na head da página:

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

Crie o script abaixo informando o id do select e o caminho do arquivo .php que fará a conexão e consulta com o banco de dados de acordo com as informações digitadas no select box do formulário:

$(document).ready(function(){

        $("#procedimento").select2({

          ajax: {
            url: "/ajaxfile_procedimentos.php",
            type: "post",
            dataType: 'json',
            delay: 250,
            data: function (params) {
              return {
                searchTerm: params.term // search term
              };
            },
              processResults: function (response) {
                return {
                  results: response
                };
            },
              cache: true
          }
        });
      });      
    }

Note que o id do componente select usado é “#procedimento” e o caminho do arquivo .php é informado para o url é “/ajaxfile_procedimentos.php”.

Arquivo ajaxfile_procedimentos.php:

//Conexão com o banco
define('HOST', 'localhost');
define('USER', 'root');
define('PASS','');
define('DBNAME','db_meubanco');

$conn = new PDO('mysql:host=' .HOST. ';dbname=' .DBNAME. ';', USER, PASS);

//Limita a 5 a qtde de resultados por pesquisa
$numberofrecords = 5;

//Consulta o banco com base no termo de pesquisa
if(!isset($_POST['searchTerm'])){
	$json = [''];
}else{ //Se o termo de pesquisa existir...
	$search = $_POST['searchTerm']; //Recebe o texto digitado no select
	
	// Fetch records
	$stmt = $conn->prepare("SELECT * FROM procedimentos WHERE descricao like :descr ORDER BY descricao LIMIT :limit");
	$stmt->bindValue(':descr', '%'.$search.'%', PDO::PARAM_STR);
	$stmt->bindValue(':limit', (int)$numberofrecords, PDO::PARAM_INT);
	$stmt->execute();
	$usersList = $stmt->fetchAll();

}
	
$response = array();

// Read Data
foreach($usersList as $user){
	$response[] = array(
		"id" => $user['id'],
		"text" => $user['descricao']
	);
}

echo json_encode($response);
exit();

Acima é feita a conexão com o banco de dados, recebido o que foi digitado no select e executada a query na tabela. Após isso é preenchido o array com os resultados e alimentada a requisição AJAX.

Veja abaixo um exemplo de lista suspensa pesquisável utilizando informações contidas nas tags option do select:

Para consultar a documentação completa do Select2 acesse https://select2.org/

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Seu computador está lento, travando ou dando tela azul? E toda vez que isso acontece você precisa gastar dinheiro com assistência técnica?

A verdade é que continuar sem esse conhecimento pode estar custando muito mais do que você imagina.

Você pode economizar centenas ou até milhares de reais ao longo do tempo fazendo você mesmo a manutenção dos seus computadores. E, se decidir prestar serviços, esse conhecimento também pode se transformar em uma fonte de renda, que pode variar de R$2.000 a R$5.000 por mês ou mais.

Tudo isso com aulas práticas, objetivas e focadas no que realmente funciona, sem enrolação:

✔ Resolver seus próprios problemas sem depender de ninguém
✔ Ganhar dinheiro com manutenção e suporte técnico
✔ Ou até entrar de vez no mercado de TI

A decisão é sua: continuar gastando dinheiro sempre que o computador apresentar um problema ou aprender uma habilidade que pode fazer você economizar e até gerar uma nova fonte de renda.

👉 CLIQUE AQUI AGORA e veja todos os detalhes antes que essa oportunidade passe: