在jQueryUI自动完成列表中选择一个项目时,如何防止输入元素更新? [英] How to prevent update of input element when an item is selected in a jQueryUI autocomplete list?
问题描述
我有以下jQueryUI自动完成功能
I have the following jQueryUI autocomplete
$('#clientSearch').autocomplete({
source: function (request, response) {
var url = window.apiUrl + '/clients?searchText=' + request.term;
var request = $.ajax({
url: url,
type: 'GET',
dataType: "json",
cache: false,
contentType: 'application/json; charset=utf-8'
});
request.done(function (clientList) {
response($.map(clientList, function (client) {
return {
label: client.lastName + ', ' + client.firstInitial + '. ' + client.sex + '/' + client.age,
value: client.id
}
}));
});
request.fail(function (jqXHR, textStatus, errorThrown) {
response(
{
label: 'Error retrieving clients',
value: null
}
);
});
},
minLength: 2,
select: function (event, ui) {
event.preventDefault();
getClient(ui.item.value);
}
});
在显示自动完成列表后,按下向下箭头以将焦点/突出显示移至项目#1,该item.value将显示在用户键入搜索条件的输入元素中.
After the autocomplete list is display when the down arrow is pressed to move focus/highlight to item #1 the item.value is displayed in the input element where the user typed the search criteria.
根据我的阅读,如上面的代码所示,在select事件中添加event.preventDefault(),应防止item.value插入到输入元素中.
From what I have read adding event.preventDefault() in the select event, as done in the code above, should prevent the item.value from being inserted into the input element.
但是,item.value仍在插入,并且在选择事件中的断点不会被选中,直到选中了突出显示的项目并按下ENTER键为止.
However, the item.value is still being inserted and a breakpoint in the select event is not hit until the highlighted item is "selected" w/ ENTER.
我希望原始搜索文本保留在输入元素中,因为突出显示在自动完成列表中的项目之间移动.
I would like the original search text to remain in the input element as the highlight is moved between the items in the autocomplete list.
推荐答案
使用 focus
事件:
focus: function (event, ui) {
event.preventDefault();
}
这篇关于在jQueryUI自动完成列表中选择一个项目时,如何防止输入元素更新?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!