plugin jQuery Typeahead Search para realizar tus búsquedas

DESCARGA : jQeuryTypeahead

plugin jQuery Typeahead Search para realizar tus búsquedas , este plugin se puede implementar para buscar en algún sistema o sitio de forma más rápida y accesible, lo importante es que la búsqueda se hace mediante elementos json o peticiones ajax que ayudan a tener una mejor presentación en el campo de búsqueda, hay variaciones y posibles resultados que se pueden lograr utilizando este plugin, de manera que se puede adaptar a distintos diseños de un sitio o un sistema, lo importante es entender el funcionamiento ya que el uso no es más que un campo de texto con un valor como resultado.

Este plugin parece simple de usar pero tiene sus pequeños detalles de implementación como por ejemplo:

1.- Primero necesitamos el html

<form id="form-car_v1" name="form-car_v1" action="/search/" method="post">
 
 <div class="ui action input">
 
 <input id="car_v1-query" name="car_v1[query]" class="first" type="search" title="search" autocomplete="off" spellcheck="false">
 
 <button id="car_v1-submit" class="ui icon button" type="submit" role="button">
 <i class="search icon"></i>
 </button>
 
 </div>
</form>

2.- Posteriormente podemos agregar algo de código php (aunque puede ser cualquier lenguaje de programación web), este código lo que haces es devolver en formato json las variables para usar.


header('Content-Type: application/json');
 
echo json_encode(
 array(
 "Acura", "Audi", "BMW", "Buick", "Cadillac", "Chevrolet", "Dodge", "Chrysler", "Ford", "GMC", "Hyunday",
 "Infinity", "Jaguar", "Jeep", "Kia Motors", "Land Rover", "Lexus", "Lincoln", "Mazda", "Mercedes-benz",
 "Mitsubishi", "Nissan", "Pontiac", "Porsche", "Saab", "Saturn", "Scion", "Subaru", "Suzuki", "Toyota",
 "Honda", "Hummer", "Mercury", "Mini", "Volkswagen", "Volvo", "Audi"
 )
);

El codigo javascript es el más importante ya que hace referencia al elemento input con id  “car_v1-query”

 

$('#car_v1-query').typeahead({
settings: {
minLength: 1,
order: "asc",
startCharacter: true,
jsonList: {
car: {
data: ["My custom brand", "Maaa Car"],
url: "/jquerytypeahead/car_v1.json"
}
}
}
});

 

Demostración: http://www.runningcoder.org/jquerytypeahead/demo/

 

 

 

 

You may also like...