Integrating preserveOrder as an option. New version: 0.2.1.

demo.html

@@ -196,7 +196,6 @@ <h2 id="demo">Demo <span class="demo-hint"><i>Try searching for: <b>account</b>,
           ],
           callbacks  : {
             search : function(query, searchCollection) {
-              console.log(["query", searchCollection.facets(), query]);
               var $query = $('#search_query');
               $query.stop().animate({opacity : 1}, {duration: 300, queue: false});
               $query.html('<span class="raquo">&raquo;</span> You searched for: <b>' + searchCollection.serialize() + '</b>');
@@ -294,7 +293,7 @@ <h2 id="demo">Demo <span class="demo-hint"><i>Try searching for: <b>account</b>,
                     "Togo", "Libya", "Jordan", "Paraguay", "Laos",
                     "El Salvador", "Sierra Leone", "Nicaragua", "Kyrgyzstan", "Denmark",
                     "Slovakia", "Finland", "Eritrea", "Turkmenistan"
-                  ]);
+                  ], {preserveOrder: true});
                   break;
               }
             },
@@ -440,7 +439,9 @@ <h2 id="demo">Demo <span class="demo-hint"><i>Try searching for: <b>account</b>,
                 { label: 'address', category: 'location' },
                 { label: 'country', category: 'location' },
                 { label: 'state',   category: 'location' },
-              ]);
+              ], {
+                  preserveOrder: true
+              });
             }
           }
         });

index.html

@@ -185,7 +185,7 @@ <h2 id="demo">Demo <span class="demo-hint"><i>Try searching for: <b>account</b>,
       $(document).ready(function() {
         var visualSearch = VS.init({
           container  : $('#search_box_container'),
-          query      : 'country: "South Africa" account: 5-samuel title: "Pentagon Papers"',
+          query      : 'country: "United States" state: "New York" account: 5-samuel title: "Pentagon Papers"',
           unquotable : [
             'text',
             'account',
@@ -279,7 +279,7 @@ <h2 id="demo">Demo <span class="demo-hint"><i>Try searching for: <b>account</b>,
                   break;
                 case 'country':
                   callback([
-                    "China", "India", "United States", "Indonesia", "Brazil",
+                    "United States", "China", "India", "Indonesia", "Brazil",
                     "Pakistan", "Bangladesh", "Nigeria", "Russia", "Japan",
                     "Mexico", "Philippines", "Vietnam", "Ethiopia", "Egypt",
                     "Germany", "Turkey", "Iran", "Thailand", "D. R. of Congo",
@@ -302,7 +302,7 @@ <h2 id="demo">Demo <span class="demo-hint"><i>Try searching for: <b>account</b>,
                     "Togo", "Libya", "Jordan", "Paraguay", "Laos",
                     "El Salvador", "Sierra Leone", "Nicaragua", "Kyrgyzstan", "Denmark",
                     "Slovakia", "Finland", "Eritrea", "Turkmenistan"
-                  ]);
+                  ], {preserveOrder: true});
                   break;
               }
             }
@@ -326,11 +326,11 @@ <h2 id="downloads">Downloads <i style="padding-left: 12px; font-size:12px;">(Rig
         <th colspan="2">1. VisualSearch JavaScript (<tt>visualsearch.js</tt>)</th>
       </tr>
       <tr>
-        <td><a href="build-min/visualsearch.js">Production Version (0.2.0)</a></td>
+        <td><a href="build-min/visualsearch.js">Production Version (0.2.1)</a></td>
         <td><i>8kb, Minified and Gzipped</i></td>
       </tr>
       <tr>
-        <td><a href="build/visualsearch.js">Development Version (0.2.0)</a></td>
+        <td><a href="build/visualsearch.js">Development Version (0.2.1)</a></td>
         <td><i>45kb, Uncompressed with Comments</i></td>
       </tr>
 
@@ -482,7 +482,14 @@ <h2 id="usage">Usage</h2>
     <h2 id="changelog">Change Log</h2>
 
     <p>
-      <b class="header">0.2.0</b><br />
+      <b class="header">0.2.1</b> <i>November 14th, 2011</i><br />
+      The autocompleted facets and values that are provided by your callbacks <tt>facetMatches</tt>
+      and <tt>valueMatches</tt> can now preserve the order of items you give them. Simply pass an
+      options hash with <tt>preserveOrder: true</tt> as the second argument to the callback. See
+      <a href="demo.html">the demo page</a> for an example.
+    </p>
+    <p>
+      <b class="header">0.2.0</b> <i>August 10th, 2011</i><br />
       Multiple instances of VisualSearch on a single page. <tt>VS.init</tt> now returns
       a reference to the instance. The <tt>search</tt> callback now contains both the
       serialized search query and a reference to the search query collection (as a 
@@ -492,7 +499,7 @@ <h2 id="changelog">Change Log</h2>
       methods on the collection.
     </p>
     <p>
-      <b class="header">0.1.0</b><br />
+      <b class="header">0.1.0</b> <i>June 23rd, 2011</i><br />
       Initial release of VisualSearch.js.
     </p>
 

lib/js/views/search_facet.js

@@ -79,6 +79,15 @@ VS.ui.SearchFacet = Backbone.View.extend({
           this.search(e);
         }
         return false;
+      }, this),
+      open      : _.bind(function(e, ui) {
+        var box = this.box;
+        this.box.autocomplete('widget').find('.ui-menu-item').each(function() {
+          var $value = $(this);
+          if ($value.data('item.autocomplete')['value'] == box.val()) {
+            box.data('autocomplete').menu.activate(new $.Event("mouseover"), $value);
+          }
+        });
       }, this)
     });
 
@@ -128,17 +137,17 @@ VS.ui.SearchFacet = Backbone.View.extend({
   // Search terms used in the autocomplete menu. These are specific to the facet,
   // and only match for the facet's category. The values are then matched on the
   // first letter of any word in matches, and finally sorted according to the
-  // value's own category.
+  // value's own category. You can pass `preserveOrder` as an option in the 
+  // `facetMatches` callback to skip any further ordering done client-side.
   autocompleteValues : function(req, resp) {
     var category = this.model.get('category');
     var value    = this.model.get('value');
     var searchTerm = req.term;
 
-    this.options.app.options.callbacks.valueMatches(category, searchTerm, function(matches, preserveOrder) {
-      if (preserveOrder) {
-        resp(matches);
-      }
+    this.options.app.options.callbacks.valueMatches(category, searchTerm, function(matches, options) {
+      options = options || {};
       matches = matches || [];
+
       if (searchTerm && value != searchTerm) {
         var re = VS.utils.inflector.escapeRegExp(searchTerm || '');
         var matcher = new RegExp('\\b' + re, 'i');
@@ -148,11 +157,15 @@ VS.ui.SearchFacet = Backbone.View.extend({
                  matcher.test(item.label);
         });
       }
-
-      resp(_.sortBy(matches, function(match) {
-        if (match == value || match.value == value) return '';
-        else return match;
-      }));
+
+      if (options.preserveOrder) {
+        resp(matches);
+      } else {
+        resp(_.sortBy(matches, function(match) {
+          if (match == value || match.value == value) return '';
+          else return match;
+        }));
+      }
     });
 
   },

lib/js/views/search_input.js

@@ -80,26 +80,30 @@ VS.ui.SearchInput = Backbone.View.extend({
 
   // Search terms used in the autocomplete menu. The values are matched on the
   // first letter of any word in matches, and finally sorted according to the
-  // value's own category.
+  // value's own category. You can pass `preserveOrder` as an option in the 
+  // `facetMatches` callback to skip any further ordering done client-side.
   autocompleteValues : function(req, resp) {
     var searchTerm = req.term;
     var lastWord   = searchTerm.match(/\w+$/); // Autocomplete only last word.
     var re         = VS.utils.inflector.escapeRegExp(lastWord && lastWord[0] || ' ');
-    this.app.options.callbacks.facetMatches(function(prefixes, preserveOrder) {
+    this.app.options.callbacks.facetMatches(function(prefixes, options) {
+      options = options || {};
       prefixes = prefixes || [];
-      if (preserveOrder) {
-          resp(prefixes);
-      }
+
       // Only match from the beginning of the word.
       var matcher    = new RegExp('^' + re, 'i');
       var matches    = $.grep(prefixes, function(item) {
         return item && matcher.test(item.label || item);
       });
 
-      resp(_.sortBy(matches, function(match) {
-        if (match.label) return match.category + '-' + match.label;
-        else             return match;
-      }));
+      if (options.preserveOrder) {
+        resp(matches);
+      } else {
+        resp(_.sortBy(matches, function(match) {
+          if (match.label) return match.category + '-' + match.label;
+          else             return match;
+        }));
+      }
     });
 
   },

lib/js/visualsearch.js

@@ -5,7 +5,7 @@
 // The annotated source HTML is generated by
 // [Docco](http://jashkenas.github.com/docco/).
 
-/** @license VisualSearch.js 0.2.0
+/** @license VisualSearch.js 0.2.1
  *  (c) 2011 Samuel Clay, @samuelclay, DocumentCloud Inc.
  *  VisualSearch.js may be freely distributed under the MIT license.
  *  For all details and documentation:
@@ -24,7 +24,7 @@
   if (!VS.utils)  VS.utils  = {};
 
   // Sets the version for VisualSearch to be used programatically elsewhere.
-  VS.VERSION = '0.2.0';
+  VS.VERSION = '0.2.1';
 
   VS.VisualSearch = function(options) {
     var defaults = {