agerix/jQuery-Autocomplete
2
0
Fork 0
mirror of https://github.com/devbridge/jQuery-Autocomplete.git synced 2024-12-31 13:51:46 +00:00
Code Issues Releases Activity

Implement onHint callback to enable hinted suggestions.

Browse Source
This commit is contained in:
Tomas Kirda 2013-06-04 18:12:01 -05:00
parent ee584149d6
commit cc0e124567
3 changed files with 49 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
demo.htm
View File

@ -10,8 +10,9 @@
<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>

18
scripts/demo.js
View File

@ -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);
}
});

32
src/jquery.autocomplete.js
View File

@ -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)) {