Visualsearch.js – Plugin jQuery para implementar búsquedas con autocompletado

VisualSearch.js es un Javascript que permite implementar cajas de búsquedas potenciadas con función de autocompletado. Permite definir todos los aspectos del autocompletado y también, recuperar los datos de la consulta como objetos estructurados. 

Implementación

Para implementar VisualSearch.js en una página web, primero tenemos que agregar el código Javascript y  CSS:

<script src="visualsearch.js" type="text/javascript"></script>
<!--[if (!IE)|(gte IE 8)]><!-->
<link href="visualsearch-datauri.css"
media="screen" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!--[if lte IE 7]><!-->
<link href="visualsearch.css" media="screen"

rel="stylesheet" type="text/css" />
<!--<![endif]-->

Luego, inicializamos la caja de búsqueda:

<div class="visual_search"></div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
VS.init({

container : $('.visual_search'),

query     : '',
callbacks : {
search       : function(query) {},
facetMatches : function() {},
valueMatches : function(facet) {}
}     });   }); </script>

Luego personalizamos las opciones de autocompletado:

callbacks : {
...
// These are the facets that will be autocompleted in an empty input.
facetMatches : function() {
return [
'account', 'filter', 'access', 'title',
{ label: 'city',    category: 'location' },
{ label: 'address', category: 'location' },
{ label: 'country', category: 'location' },
{ label: 'state',   category: 'location' },
];
}
...
// These are the values that match specific categories, autocompleted
// in a category's input field.
valueMatches : function(facet) {
switch (facet) {
case 'account':
return [
{ value: '1-amanda', label: 'Amanda' },
{ value: '2-aron',   label: 'Aron' },
{ value: '3-eric',   label: 'Eric' },
{ value: '4-jeremy', label: 'Jeremy' },
{ value: '5-samuel', label: 'Samuel' },
{ value: '6-scott',  label: 'Scott' }
];
case 'filter':
return ['published', 'unpublished', 'draft'];
case 'access':
return ['public', 'private', 'protected'];
case 'title':
return [
'Pentagon Papers',
'CoffeeScript Manual',
'Laboratory for Object Oriented Thinking',
'A Repository Grows in Brooklyn'
]
}
}
...
}

VisualSearch.js

Sitio/documentación/descargar: documentcloud.github.com/visualsearch

Vía: www.webappers.com/2011/06/27/visualsearch-js-autocomplete-faceted-search-queries