{"id":27493,"date":"2021-05-17T11:12:00","date_gmt":"2021-05-17T08:12:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27493"},"modified":"2021-10-18T04:11:44","modified_gmt":"2021-10-18T01:11:44","slug":"como-usar-o-jquery-autocomplete-com-ajax","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-usar-o-jquery-autocomplete-com-ajax\/","title":{"rendered":"Como usar o jQuery Autocomplete com Ajax"},"content":{"rendered":"

Voc\u00ea est\u00e1 procurando integrar o jQuery Autocomplete em seu site? jQuery Autocomplete \u00e9 como a Pesquisa Google, em que um usu\u00e1rio digita algumas letras e o conjunto de resultados correspondente \u00e0s letras digitadas \u00e9 pr\u00e9-preenchido.<\/p>\n

O jQuery UI<\/a> fornece o recurso de preenchimento autom\u00e1tico. Para usar este recurso, voc\u00ea precisa usar os arquivos JS e CSS fornecidos por eles.<\/p>\n

Neste breve tutorial, daremos um pequeno exemplo e mostraremos como usar o jQuery Autocomplete com Ajax.<\/p>\n

Como exemplo, vamos pegar um campo de texto. Quando um usu\u00e1rio come\u00e7a a inserir uma letra neste campo, dados pr\u00e9-preenchidos devem aparecer, a partir dos quais o usu\u00e1rio pode selecionar um espec\u00edfico.<\/p>\n

Como usar o jQuery Autocomplete com Ajax<\/h3>\n

Digamos que nosso campo de texto seja para o nome de um usu\u00e1rio. Voc\u00ea tem que pesquisar o primeiro nome e os registros dos nomes s\u00e3o armazenados no banco de dados.<\/p>\n

Crie um index.html<\/code>arquivo e adicione o c\u00f3digo abaixo nele.<\/p>\n

<html>\n<head>\n\u00a0\u00a0\u00a0\u00a0<title>jQuery Autocomplete<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/css\/bootstrap.min.css\" integrity=\"sha384-Vkoo8x4CGsO3+Hhxv8T\/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh\" crossorigin=\"anonymous\">\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/code.jquery.com\/ui\/1.12.1\/themes\/base\/jquery-ui.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-md-2\"><\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-md-8\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleInputFname\">First Name<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control\" id=\"fnames\" placeholder=\"First Name\" name=\"fname\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-md-2\"><\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-1.12.4.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/ui\/1.12.1\/jquery-ui.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/js\/bootstrap.min.js\" integrity=\"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6\" crossorigin=\"anonymous\"><\/script>\n<\/body><\/code><\/pre>\n
No HTML acima, dei o id “fnames" para a caixa de pesquisa. Neste id eu chamaria o m\u00e9todo autocomplete.<\/p>\n
A seguir, vamos escrever o c\u00f3digo JavaScript que usa o m\u00e9todo autocomplete, dar uma chamada para o arquivo ajax, pegar a resposta do arquivo ajax e anexar \u00e0 caixa de pesquisa.<\/p>\n
<script type=\"text\/javascript\">\n\u00a0\u00a0\u00a0\u00a0$(function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\"#fnames\").autocomplete({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0source: function(term, response){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.getJSON('search.php', { q: term }, function(data){ response(data); });\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n<\/script><\/code><\/pre>\n
No search.php<\/code>arquivo, precisamos buscar registros do banco de dados, construir a sa\u00edda no formato de array e finalmente usar json_encode<\/code>para codificar o array. N\u00e3o se esque\u00e7a de usar json_encode<\/code>ou voc\u00ea n\u00e3o obter\u00e1 a sa\u00edda esperada.<\/p>\n
<?php\n$q = $_REQUEST['q']['term'];\n\u00a0\n\/\/search in the database and get the result.\n\/\/for e.x. your database result is ['sam', 'sandy']\n\/\/json_encode the final output\necho json_encode(['sam', 'sandy']);\n?><\/code><\/pre>\n
Espero que voc\u00ea entenda como usar o jQuery Autocomplete com Ajax em PHP. Gostar\u00edamos de ouvir sua opini\u00e3o na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n