VisualSearch.js

VisualSearch.js enhances ordinary search boxes with the ability to autocomplete faceted search queries. Specify the facets for completion, along with the completable values for any facet. You can retrieve the search query as a structured object, so you don't have to parse the query string yourself.

Here's an example of a search on DocumentCloud.org that uses facets.

The project is hosted on GitHub. You can report bugs and discuss features on the issues page, on Freenode in the #documentcloud channel, or send tweets to @documentcloud.

VisualSearch.js is an open-source component of DocumentCloud.
The complete annotated source code is also available.

Table of Contents

Demo | Downloads | Usage | Change Log

Demo Try searching for: account, filter, access, title, city, state, or country.

country:

» You searched for: country: "South Africa"

»' + query + '

Downloads (Right-click, and use "Save As")

0. Everything (visualsearch.zip)
Download everything
1. VisualSearch JavaScript (visualsearch.js)
Production Version (0.1.0)	8kb, Minified and Gzipped
Development Version (0.1.0)	45kb, Uncompressed with Comments
2. VisualSearch Stylesheets (visualsearch.css)
You should include both the datauri and image urls versions. See how to include both
Production Version - datauri	4kb, Minified and Gzipped
Production Version - image urls	4kb, Minified and Gzipped
Development Version	8kb, Uncompressed with Comments
3. VisualSearch Images
Search Glyph	4kb, embedded in visualsearch-datauri.css
Cancel Button	4kb, embedded in visualsearch-datauri.css
4. VisualSearch Dependencies (jQuery, jQuery UI, Underscore.js, Backbone.js)
You should only include the dependencies you don't already have.
Production Version - All	49kb, Minified and Gzipped
Development Version - All	340kb, Uncompressed with Comments
jQuery 1.6.1	238kb, Uncompressed with Comments
jQuery UI 1.8.13: Core Position Widget Autocomplete	48kb, Uncompressed with Comments
Underscore 1.1.5	29kb, Uncompressed with Comments
Backbone 0.3.3	41kb, Uncompressed with Comments

Usage

To use VisualSearch.js on your site, follow these instructions on installation, configuration, and customization.

1. Insert the JavaScript and CSS into your page:
   

   <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]-->

2. Initialize the Visual Search box:
   

   <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>

3. Customize the autocompleted facets and values:

   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'
           ]
       }
     }
   ...
   }

Change Log

0.1.0
Initial release of VisualSearch.js.

Javascript para mejorar la experiencia en las búsquedas mediante la opción de autocompletar los resultados.