我有一个带有 name 属性的对象数组,我想使用 jQueryUI 的自动完成功能使其可搜索。当一个字母被按下时,自动完成会显示一个文本,其中包含返回了多少结果。但是,当菜单关闭或文本框为空时,这不会更新。我想知道以下内容:
- 这种行为在哪里告诉我们菜单中有多少结果?我寻找通用字符串
X results are available, use up and down arrow keys to navigate
,但我没有看到它。 - 如果我只想触发某个函数,比如五个结果,该怎么办。如何覆盖导致此行为的任何基本 jQueryUI 函数?
小提琴:这里
$(document).ready(function () {
var objArray = [{
name: 'James',
department: 'Dept.1',
experience: 1
}, {
name: 'Jessie',
department: 'Dept. 2',
experience: 2
}, {
name: 'Walt',
department: 'Dept. 3',
experience: 3
}
];
$(document.body).on('autocompletesearch', function (e, ui) {
//hides the div whenever the value in the text box no longer matches
//the name in the array
$('.hider').hide();
});
//this function will take in an array
//and a property and make a smaller array
//which can be searched using the autocomplete
function getRefArray(a, attr) {
var newArray = [];
for (var i = 0; i < a.length; i++) {
for (var prop in a[i]) {
if (prop == attr) {
newArray.push(a[i].name);
}
}
}
return newArray;
}
//when an element is selected from the autocomplete menu
//this functions returns a div to be bound to the page
function getCard(n) {
var $div = $('<div>').text(n).addClass('hider').show();
return $div;
}
$('#autocomplete').autocomplete({
source: getRefArray(objArray, 'name'),
select: function (event, ui) {
var name = ui.item.value;
getCard(name).appendTo('body');
},
search: function (event, ui) {
},
open: function (event, ui) {
},
close: function (event, ui) {
console.log('closed menu, remove results count');
}
});
});