diff --git a/demo.htm b/demo.htm index bf75879..1477289 100644 --- a/demo.htm +++ b/demo.htm @@ -10,8 +10,9 @@

Ajax Lookup

Type country name in english:

-
- +
+ +
diff --git a/scripts/demo.js b/scripts/demo.js index 8c0cacd..cb4f2e0 100644 --- a/scripts/demo.js +++ b/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); } }); diff --git a/src/jquery.autocomplete.js b/src/jquery.autocomplete.js index adedeb3..94de735 100644 --- a/src/jquery.autocomplete.js +++ b/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)) {