0
我使用DevBridge自動完成和JSON文件,可以很好地顯示所有數據,但我最終只需顯示一個數據。Jquery UI自動完成顯示輸入類型文本中的所有數據
例如:
在輸入文本形式i型「LON」 --->數據顯示「隆多,英格蘭」 ----->我選擇「英國倫敦」 - --->但我只需要 「倫敦」輸入形式展現,沒有「英格蘭」
如何???
請幫我
這是我的腳本:
$(函數(){ '使用嚴格的';
var countriesArray = $.map(countries, function (item) { return { value: item.city +','+ item.country, data: item.city }; });
// Setup jQuery ajax mock:
$.mockjax({
url: '*',
responseTime: 2000,
response: function (settings) {
var query = settings.data.query,
queryLowerCase = query.toLowerCase(),
re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi'),
suggestions = $.grep(countriesArray, function (country) {
// return country.value.toLowerCase().indexOf(queryLowerCase) === 0;
return re.test(country.value);
}),
response = {
query: query,
suggestions: suggestions
};
this.responseText = JSON.stringify(response);
}
});
// Initialize ajax autocomplete:
$('#autocomplete-ajax').autocomplete({
// serviceUrl: '/autosuggest/service/url',
lookup: countriesArray,
lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
return re.test(suggestion.value);
},
onSelect: function(suggestion) {
$('#autocomplete-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
},
onHint: function (hint) {
$('#autocomplete-ajax-x').val(hint);
},
onInvalidateSelection: function() {
$('#selction-ajax').html('You selected: none');
}
});
// Initialize autocomplete with local lookup:
$('#autocomplete').devbridgeAutocomplete({
lookup: countriesArray,
minChars: 0,
onSelect: function (suggestion) {
$('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
},
showNoSuggestionNotice: true,
noSuggestionNotice: 'Sorry, no matching results',
});
// Initialize autocomplete with custom appendTo:
$('#autocomplete-custom-append').autocomplete({
lookup: countriesArray,
appendTo: '#suggestions-container'
});
// Initialize autocomplete with custom appendTo:
$('#autocomplete-dynamic').autocomplete({
lookup: countriesArray
});
});
這是JSON
VAR國家= [ { 「城市」: 「倫敦」, 「代碼」: 「25gt」, 「國」: 「英格蘭」 }, { 「城市 「: 」馬德里「, 」代碼「: 」2f85「, 」國「: 」西班牙「 }, { 」城市「: 」巴黎「, 」代碼「: 」6fg5「, 」 國家「:」法國「 } ]
這是HTML
<div style="position: relative; height: 80px;">
<label id="selction-ajax"></label>
<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>
請幫幫忙!
TNX
你'countriesArray'定義設置返回'城市+ country'爲{}值。改變(如下面的答案)到只是'城市',你很好。 – DevlshOne 2014-09-07 00:50:08