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

O seu computador está lento, travando ou dando tela azul… e você não faz ideia do que fazer?

Saiba que isso pode estar te fazendo perder dinheiro — seja com manutenção cara ou oportunidades que você está deixando passar.

Com o Super Técnico 2.0, você aprende na prática como diagnosticar defeitos, montar computadores do zero e fazer upgrades que realmente aumentam o desempenho, mesmo que você esteja começando do absoluto zero.

Você pode usar esse conhecimento para:

✔ 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

Tudo com aulas diretas ao ponto, sem enrolação e focadas no que realmente funciona no dia a dia.

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