我有一个自动完成功能。我想为用户提供从标准功能的源中选择项目的选项。但我还想让用户能够输入任何值,并且当源中匹配 0 个项目时,允许用户提交新值。
我一直在尝试以下操作:
$("#rwF1, #rwF2").autocomplete({
source: itemshere,
select: function(event, ui) {
console.log('selection made');
}
}).bind('keydown', function() {
var key = event.keyCode;
if (key == $.ui.keyCode.ENTER || key == $.ui.keyCode.NUMPAD_ENTER) {
console.log('user submitted content');
}
});
对于绑定(bind) keydown,问题是即使进行选择,它也总是会触发。如何使绑定(bind) keydown 仅在用户未从自动完成中选择项目时触发?有没有一种方法可以检测用户是否选择了某个项目?
谢谢
最佳答案
您可以在每个 input
的 data-*
属性中存储一个变量,该变量保存一个值,指示是否选择了某个值。
这有一个警告,我将在代码后解释:
$("#rwF1, #rwF2").autocomplete({
source: itemshere,
select: function(event, ui) {
$(this).data("selected", true);
}
}).bind("keydown", function(e) {
var $this = $(this);
/* Use e.which, jQuery has normalized it across browsers */
if (e.which === $.ui.keyCode.ENTER ||
e.which === $.ui.keyCode.NUMPAD_ENTER) {
/* If they selected an item... */
if (!$this.data("selected")) {
console.log("new item");
} else {
console.log('existing');
}
} else {
$this.data("selected", false);
}
});
示例: http://jsfiddle.net/aAD6W/2/
我提到的警告是,如果用户在列表中键入一个项目而没有选择它,则不会触发select
。如果这对你来说是一个破坏性的事情,我可以提供一个解决方案(我没有在这里包含它,因为它增加了代码的复杂性)。
关于jQuery Autocomplete,如何允许用户提交与源中的值不匹配的输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10253178/