Autocompletar busqueda con jquery ui

jquery ui autocompleteVamos a ver como implementar a nuestra web un buscador autocomplete con jquery, los pasos son primero importar tanto jquery como jquery ui ya que sera este el que utilicemos para hacer el efecto, tambien tenemos que implementar un pequeño css de jquery ui.

[code]//importamos todo lo necesario
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
href=”http://code.jquery.com/jquery-1.9.1.js
http://code.jquery.com/ui/1.10.3/jquery-ui.js[/code]

En realidad podriamos hacerlo con solo una linea y un array javascript, pero como queremos que nos muestre los datos a partir de un archivo php usaremos la funcion ajax de jquery a la que le pasaremos la variable “q” la cual contiene el valor del campo que se autocompleta, la pagina php a la que llamaremos sera “datos.php”.

[code]//comienza el script para autocompletar

$(function() {

$( “#q” ).autocomplete({

source: function(request, response) {

$.ajax({

url: “datos.php”,

dataType: “json”,

data: {

term: request.term,

q: $(“#q”).val(),

test: 4

},

success: function(data) {

response(data);

}

});

},

});

});

input id=”q”

//cuadro de texto con autocomplete[/code]

Ahora el archivo php que nos devuelve las busquedas archivadas previamente en un archivo txt, este archivo devuelve un json con las busquedas que coinciden con los caracteres que estamos introduciendo en la caja de texto.

[code]//archivo php que devuelve los resultados en formato json
if(!empty($_GET[‘q’])){
$archivo = “busquedas.txt”;
$actual = file_get_contents($archivo);
$arrFichero = explode(“\n”, $actual);
foreach($arrFichero as $key=$temp){
if(!stristr($temp, $_GET[‘q’])===false){
$mostrar[$key] = $temp;
}
}
echo json_encode($mostrar);[/code]

Este es un sistema de autocompletar con jquery ui muy sencillo, se puede cambiar el archivo php por una busqueda en mysql o por un array ya creado.

Deja un comentario