Implement onHint callback to enable hinted suggestions.

Author: Tomas Kirda

demo.htm

@@ -10,8 +10,9 @@ <h1>Ajax Autocomplete Demo</h1>
 
         <h2>Ajax Lookup</h2>
         <p>Type country name in english:</p>
-        <div>
-            <input type="text" name="country" id="autocomplete-ajax"/>
+        <div style="position: relative; height: 80px;">
+            <input type="text" name="country" id="autocomplete-ajax" style="position: absolute; z-index: 2; background: transparent;"/>
+            <input type="text" name="country" id="autocomplete-ajax-x" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;"/>
         </div>
         <div id="selction-ajax"></div>
 

scripts/demo.js

@@ -16,12 +16,14 @@ $(function () {
         // Setup jQuery ajax mock:
         $.mockjax({
             url: '*',
-            responseTime:  200,
+            responseTime: 2000,
             response: function (settings) {
                 var query = settings.data.query,
                     queryLowerCase = query.toLowerCase(),
-                    suggestions = $.grep(countries, function(country) {
-                         return country.toLowerCase().indexOf(queryLowerCase) !== -1;
+                    re = new RegExp('\\b' + queryLowerCase, 'gi'),
+                    suggestions = $.grep(countriesArray, function (country) {
+                         // return country.value.toLowerCase().indexOf(queryLowerCase) === 0;
+                        return re.test(country.value);
                     }),
                     response = {
                         query: query,
@@ -34,9 +36,17 @@ $(function () {
 
         // Initialize ajax autocomplete:
         $('#autocomplete-ajax').autocomplete({
-            serviceUrl: '/autosuggest/service/url',
+            // serviceUrl: '/autosuggest/service/url',
+            lookup: countriesArray,
+            lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
+                var re = new RegExp('\\b' + queryLowerCase, 'gi');
+                return re.test(suggestion.value);
+            },
             onSelect: function(suggestion) {
                 $('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
+            },
+            onHint: function (hint) {
+                $('#autocomplete-ajax-x').val(hint);
             }
         });
 

src/jquery.autocomplete.js

@@ -318,6 +318,8 @@
                     return;
             }
 
+            that.findBestHint();
+
             clearInterval(that.onChangeInterval);
 
             if (that.currentValue !== that.el.val()) {
@@ -421,6 +423,7 @@
             that.visible = false;
             that.selectedIndex = -1;
             $(that.suggestionsContainer).hide();
+            that.signalHint(null);
         },
 
         suggest: function () {
@@ -460,6 +463,32 @@
                 that.selectedIndex = 0;
                 container.children().first().addClass(classSelected);
             }
+
+            that.findBestHint();
+        },
+
+        findBestHint: function () {
+            var that = this,
+                value = that.el.val().toLowerCase(),
+                bestMatch = null;
+
+            $.each(that.suggestions, function (i, suggestion) {
+                var foundMatch = suggestion.value.toLowerCase().indexOf(value) === 0;
+                if (foundMatch) {
+                    bestMatch = suggestion;
+                }
+                return !foundMatch;
+            });
+
+            that.signalHint(bestMatch);
+        },
+
+        signalHint: function (suggestion) {
+            var hintValue = '';
+            if (suggestion) {
+                hintValue = this.currentValue + suggestion.value.substr(this.currentValue.length);
+            }
+            (this.options.onHint || $.noop)(hintValue);
         },
 
         verifySuggestionsFormat: function (suggestions) {
@@ -532,6 +561,7 @@
                 $(that.suggestionsContainer).children().first().removeClass(that.classes.selected);
                 that.selectedIndex = -1;
                 that.el.val(that.currentValue);
+                that.findBestHint();
                 return;
             }
 
@@ -571,6 +601,7 @@
             }
 
             that.el.val(that.getValue(that.suggestions[index].value));
+            that.signalHint(null);
         },
 
         onSelect: function (index) {
@@ -580,6 +611,7 @@
 
             that.currentValue = that.getValue(suggestion.value);
             that.el.val(that.currentValue);
+            that.signalHint(null);
             that.suggestions = [];
 
             if ($.isFunction(onSelectCallback)) {