Como usar o jQuery Autocomplete com Ajax
Você está procurando integrar o jQuery Autocomplete em seu site? jQuery Autocomplete é como a Pesquisa Google, em que um usuário digita algumas letras e o conjunto de resultados correspondente às letras digitadas é pré-preenchido.
O jQuery UI fornece o recurso de preenchimento automático. Para usar este recurso, você precisa usar os arquivos JS e CSS fornecidos por eles.
Neste breve tutorial, daremos um pequeno exemplo e mostraremos como usar o jQuery Autocomplete com Ajax.
Como exemplo, vamos pegar um campo de texto. Quando um usuário começa a inserir uma letra neste campo, dados pré-preenchidos devem aparecer, a partir dos quais o usuário pode selecionar um específico.
Como usar o jQuery Autocomplete com Ajax
Digamos que nosso campo de texto seja para o nome de um usuário. Você tem que pesquisar o primeiro nome e os registros dos nomes são armazenados no banco de dados.
Crie um index.htmlarquivo e adicione o código abaixo nele.
<html>
<head>
<title>jQuery Autocomplete</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="form-group">
<label for="exampleInputFname">First Name</label>
<input type="text" class="form-control" id="fnames" placeholder="First Name" name="fname">
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>No HTML acima, dei o id “fnames" para a caixa de pesquisa. Neste id eu chamaria o método autocomplete.
A seguir, vamos escrever o código JavaScript que usa o método autocomplete, dar uma chamada para o arquivo ajax, pegar a resposta do arquivo ajax e anexar à caixa de pesquisa.
<script type="text/javascript">
$(function() {
$("#fnames").autocomplete({
source: function(term, response){
$.getJSON('search.php', { q: term }, function(data){ response(data); });
}
});
});
</script>No search.phparquivo, precisamos buscar registros do banco de dados, construir a saída no formato de array e finalmente usar json_encodepara codificar o array. Não se esqueça de usar json_encodeou você não obterá a saída esperada.
<?php
$q = $_REQUEST['q']['term'];
//search in the database and get the result.
//for e.x. your database result is ['sam', 'sandy']
//json_encode the final output
echo json_encode(['sam', 'sandy']);
?>Espero que você entenda como usar o jQuery Autocomplete com Ajax em PHP. Gostaríamos de ouvir sua opinião na seção de comentários abaixo.