{"id":27940,"date":"2021-05-17T11:07:00","date_gmt":"2021-05-17T08:07:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27940"},"modified":"2021-10-17T17:01:48","modified_gmt":"2021-10-17T14:01:48","slug":"como-usar-jquery-autocomplete-con-ajax","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-usar-jquery-autocomplete-con-ajax\/","title":{"rendered":"C\u00f3mo usar jQuery Autocomplete con Ajax"},"content":{"rendered":"

\u00bfEst\u00e1 buscando integrar jQuery Autocomplete en su sitio web? jQuery Autocomplete es como la B\u00fasqueda de Google donde un usuario ingresa algunas letras y el conjunto de resultados que coincide con las letras escritas se completa previamente.<\/p>\n

La interfaz de usuario de jQuery<\/a> proporciona la funci\u00f3n Autocompletar. Para utilizar esta funci\u00f3n, debe utilizar archivos JS y CSS proporcionados por ellos.<\/p>\n

En este breve tutorial, tomaremos un peque\u00f1o ejemplo y le mostraremos c\u00f3mo usar jQuery Autocomplete con Ajax.<\/p>\n

Como ejemplo, tomemos un campo de texto. Cuando un usuario comienza a ingresar una letra en este campo, deben aparecer datos precompletados de los cuales el usuario puede seleccionar uno espec\u00edfico.<\/p>\n

C\u00f3mo usar jQuery Autocomplete con Ajax<\/h3>\n

Digamos que nuestro campo de texto es para el nombre de un usuario. Debe buscar el nombre y los registros de nombres se almacenan en la base de datos.<\/p>\n

Cree un index.html<\/code>archivo y agregue el c\u00f3digo a continuaci\u00f3n.<\/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
En el HTML anterior, he dado id "fnames" al cuadro de b\u00fasqueda. En este id, llamar\u00eda al m\u00e9todo de autocompletar.<\/p>\n
A continuaci\u00f3n, escribamos c\u00f3digo JavaScript que use el m\u00e9todo de autocompletar, llamemos al archivo ajax, tomemos la respuesta del archivo ajax y agreguemos al cuadro de b\u00fasqueda.<\/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
En el search.php<\/code>archivo, necesitamos buscar registros de la base de datos, construir la salida en formato de matriz y finalmente usar json_encode<\/code>para codificar la matriz. No olvide usarlo json_encode<\/code>o de lo contrario no obtendr\u00e1 el resultado esperado.<\/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 entiendas c\u00f3mo usar jQuery Autocomplete con Ajax en PHP. Nos gustar\u00eda conocer su opini\u00f3n en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n