jQueryUI のオートコンプリートで検索可能にしたい name プロパティを持つオブジェクトの配列があります。文字をキーダウンすると、オートコンプリートにより、返された結果の数を示すテキストが表示されます。ただし、メニューを閉じたときやテキスト ボックスが空のときは更新されません。次のことを知りたいです。
- メニューにいくつの結果があるかを示すこの動作はどこにありますか? 一般的な文字列を探しましたが、
X results are available, use up and down arrow keys to navigate表示されませんでした。 - 特定の関数だけを起動したい場合、たとえば 5 つの結果が必要だとします。この動作を引き起こしている基本 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');
}
});
});