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.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

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() {
       var visualSearch = VS.init({
         container : $('.visual_search'),
         query     : '',
         callbacks : {
           search       : function(query, searchCollection) {},
           facetMatches : function(callback) {},
           valueMatches : function(facet, searchTerm, callback) {}
         }
       });
     });
   </script>

3. Customize the autocompleted facets and values:

   callbacks : {
     ...
     // These are the facets that will be autocompleted in an empty input.
     facetMatches : function(callback) {
       callback([
         '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.  searchTerm can be used to filter the
     // list on the server-side, prior to providing a list to the widget.
     valueMatches : function(facet, searchTerm, callback) {
       switch (facet) {
       case 'account':
           callback([
             { 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' }
           ]);
           break;
         case 'filter':
           callback(['published', 'unpublished', 'draft']);
           break;
         case 'access':
           callback(['public', 'private', 'protected']);
           break;
         case 'title':
           callback([
             'Pentagon Papers',
             'CoffeeScript Manual',
             'Laboratory for Object Oriented Thinking',
             'A Repository Grows in Brooklyn'
           ]);
           break;
       }
     }
   ...
   }

4. Inspect the Visual Search box

   // Returns the unstructured search query
   visualSearch.searchBox.value() 
   // "country: "South Africa" account: 5-samuel title: "Pentagon Papers""
   
   // Returns an array of Facet model instances
   visualSearch.searchQuery.facets()
   // [FacetModel<country:"South Africa">, 
   //  FacetModel<account:5-samuel>, 
   //  FacetModel<title:"Pentagon Papers">]
   
   // Set the search query with raw text
   visualSearch.searchBox.value("Country: US State: \"New York\" Key: Value")