Autocomplete com jQuery UI + PHP + MySQL

Autocomplete com jQuery UI + PHP + MySQLHoje vamos montar um autocomplete utilizando jQuery UI, PHP e MySQL, essa funcionalidade tem sido cada vez mais requisitada em sites e sistemas administrativos via WEB. O autocomplete traz mais dinâmica para experiência do usuário em diversas situações quando necessário digitar caracteres em uma input para efetuar um consulta.

 

 

Atualmente acredito que o autocomplete que seja mais famoso e utilizado seja a caixa de pesquisa do Google, onde digitamos as inciais do termo de pesquisa que procuramos e obtemos algo parecido com o resultado abaixo.
Autocomplete google

Outro caso de uso são em cadastros de clientes ou produtos, com autocomplete o usuário não precisa saber a descrição completa do produto, bastando apenas digitar as primeiras letras para ser exibido instantaneamente uma listagem de produtos onde a descrição inicia com os caracteres informados.

Nesse post vamos simular uma pesquisa com cadastro de livros, onde após selecionar o registro desejado na listagem do autocomplete será enviado uma requisição AJAX para capturar todos os dados do livro e preencher os campos do formulário, tudo isso instantaneamente sem dar refresh na página.

Ambiente de desenvolvimento segue abaixo.

Bootstrap (Sou horrível de Front-End então tenho que usar bootstrap srsr)

– jQuery

–  jQuery UI

– PHP 5.5

– MySQL 5.5

 

Construindo Autocomplete

Para iniciar esse exemplo vou postar abaixo o script SQL para criação do banco de dados db_blog, tabela livro e também as instruções de INSERT para carregar os dados:

 

Post relacionado:  Formulário de Contato com AJAX + PHP + MySQL

Abaixo segue o script da index.php contendo o HTML da página, observem que estou usando para estilização somente as classes CSS do bootstrap:

 

Post relacionado:  Consulta simples utilizando PDO no PHP

Agora o arquivo custom.js onde tem toda a mágica para o funcionamento do autocomplete, preenchimento dos campos e limpeza, o segredo desse código é o trabalho em conjunto do plugin jQuery UI com requisições AJAX intercaladas. Observem que o autocomplete é acionado somente após o segundo carácter ser digitado no input de pesquisa, limitamos com a propriedade minLenghth do plugin, poderíamos até colocar após o terceiro carácter, essa prática ajudaria em pesquisas mais específicas contendo mais informações para filtro WHERE da instrução SQL.

 

Post relacionado:  10 pegadinhas PHP escondidas na linguagem

Para finalizar o script consulta.php que é responsável por receber os parâmetros das consultas e devolver os dados no formato JSON para página index.php, observem que esse script retorna dados para 2 tipos de consultas diferentes. A primeira consulta com acao = ‘autocomplete’ retorna apenas os campos que serão exibidos no autocomplete, a segunda consulta com acao = ‘consulta’ retorna todos os dados do livro que são requisitados após selecionar um item na listagem do autocomplete.

 

O layout final da página sem itens consultados ficou assim:

Layout Página Autocomplete

 

Fazendo uma pesquisa por livros que contenham as letras “ja”, observem que conforme o item selecionado na listagem do autocomplete são preenchidos os campos do formulário, isso graças a requisição AJAX que envia como parâmetro o título selecionado na listagem:

Pesquisa com autocomplete

Vídeo complementar ao post

 

Bom pessoal espero que tenham gostado desse post e do vídeo complementar, esses scripts postados aqui podem ser infinitamente modificados e melhorados para melhor atender a necessidades do leitor, inclusive pode se optar pela utilização do outros tipos de plugin para autocomplete, existem diversos deles na WEB.

Até a próxima  …

Se gostou compartilhe esse post nas redes sociais, ajude o blog DevWilliam a crescer!

Show Buttons
Hide Buttons