使用箭头键浏览结果时在jQueryUIAutocomplete上触发“选择”事件

当使用向上和向下箭头键浏览结果时，在jQuery UI自动完成搜索字段上触发select事件的最简单方法是什么？之后，用户只需按一次退格键就可以清除该字段。

您可以使用从this jsfiddle复制来的here来测试您的方法。

您已经达到与jQueryUI竞争焦点的地步，但是您可以通过设置超时来解决此问题，因此您的焦点将发生在jQueryUI完成之后的下一个js周期。

您可以使用自动完成的焦点事件：

$( "#tags" ).autocomplete({
source: availableTags,focus: optionFocused
});


然后构建一个功能，用于选择文本并将其集中在下一个循环上

function optionFocused(event,ui) {
setTimeout(function(){
$('#tags').select().focus();
},0)
}


这是一个有效的代码段

在此演示中记笔记：https://jqueryui.com/autocomplete/#multiple

您可以执行以下操作：

https://jsfiddle.net/Twisty/7m9qs3wc/5/

Javascript

function quickDel(tObj) {
tObj.val("");
}
$("#tags").on("keydown",function(event) {
if (event.keyCode === $.ui.keyCode.BACKSPACE &&
!$(this).autocomplete("instance").menu.active) {
event.preventDefault();
quickDel($(this));
}
}).autocomplete({
source: availableTags
});


当“退格”菜单未激活时，这将快速删除该字段的所有内容。

如果要突出显示它，可以编写要在focus中使用的突出显示函数，并在Select回调中触发它。

示例：https://jsfiddle.net/Twisty/7m9qs3wc/12/

注意，“自动完成”中的focus与菜单项有关。因此，我们将.on("focus")称为字段本身。

或者当您将焦点放在菜单项上时执行全部操作：https://jsfiddle.net/Twisty/7m9qs3wc/19/