jquery - JQuery 自动完成不显示国家/地区数组

Question

我有一个搜索框和一系列国家/地区。

https://codepen.io/Teeke/pen/qBajXMw?editors=1111

<input type="text" id="autocomplete" name="country" v-model="search" class="form-control input-form" placeholder="Search Earth...">

var countries = {
"A2": "Andorra Test",
"AE": "United Arab Emirates",
"AF": "Afghanistan",
"AG": "Antigua and Barbuda",
"AI": "Anguilla" 
}
var countriesString = [
"Andorra",
"Andorra Test",
"Just another country",
"United Arab Emirates"
];
var countriesArray = $.map(countries, function (value, key) { return { value: value, data: key }; });

// Initialize ajax autocomplete:
$('#autocomplete').autocomplete({
// serviceUrl: '/autosuggest/service/url',
//lookup: countriesString,
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) {
    $('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
},
onHint: function (hint) {
    $('#autocomplete-ajax-x').val(hint);
},
onInvalidateSelection: function() {
    $('#selction-ajax').html('You selected: none');
}
});

我加载了依赖库、JQuery 和 JQuery Autocomplete。国家/地区数组未正确显示。

标签： jqueryjquery-uijquery-ui-autocomplete