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

Tags: lista suspensa pesquisável | select box pesquisável