Cómo usar jQuery Autocomplete con Ajax
¿Está buscando integrar jQuery Autocomplete en su sitio web? jQuery Autocomplete es como la Búsqueda de Google donde un usuario ingresa algunas letras y el conjunto de resultados que coincide con las letras escritas se completa previamente.
La interfaz de usuario de jQuery proporciona la función Autocompletar. Para utilizar esta función, debe utilizar archivos JS y CSS proporcionados por ellos.
En este breve tutorial, tomaremos un pequeño ejemplo y le mostraremos cómo usar jQuery Autocomplete con Ajax.
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ífico.
Cómo usar jQuery Autocomplete con Ajax
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.
Cree un index.htmlarchivo y agregue el código a continuación.
<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>En el HTML anterior, he dado id "fnames" al cuadro de búsqueda. En este id, llamaría al método de autocompletar.
A continuación, escribamos código JavaScript que use el método de autocompletar, llamemos al archivo ajax, tomemos la respuesta del archivo ajax y agreguemos al cuadro de búsqueda.
<script type="text/javascript">
$(function() {
$("#fnames").autocomplete({
source: function(term, response){
$.getJSON('search.php', { q: term }, function(data){ response(data); });
}
});
});
</script>En el search.phparchivo, necesitamos buscar registros de la base de datos, construir la salida en formato de matriz y finalmente usar json_encodepara codificar la matriz. No olvide usarlo json_encodeo de lo contrario no obtendrá el resultado esperado.
<?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 entiendas cómo usar jQuery Autocomplete con Ajax en PHP. Nos gustaría conocer su opinión en la sección de comentarios a continuación.
Artículos relacionados
- Carga de archivos Ajax con PHP y jQuery
- Seleccionar / deseleccionar varias casillas de verificación con jQuery