mirror of
https://github.com/devbridge/jQuery-Autocomplete.git
synced 2024-11-12 16:26:37 +00:00
Implement onHint callback to enable hinted suggestions.
This commit is contained in:
parent
ee584149d6
commit
cc0e124567
5
demo.htm
5
demo.htm
@ -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>
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -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)) {
|
||||
|
Loading…
Reference in New Issue
Block a user