使用箭头键浏览结果时，jQuery UI自动完成上的触发器'select'事件

Question

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

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

Answer 1

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

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

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

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

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

这是一个有效的代码段

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

$(document).ready(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags, 
      focus: optionFocused
    });
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
			  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
			  crossorigin="anonymous"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

Answer 2

在此演示中记笔记：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
});

当Backspace是Menu时，此选项将快速删除该字段的所有内容。

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

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

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

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