使用箭头键浏览结果时在 jQuery UI 自动完成上触发“选择”事件答案

【问题标题】：Trigger 'select' event on jQuery UI Autocomplete when browsing results with arrow keys使用箭头键浏览结果时在 jQuery UI 自动完成上触发“选择”事件
【发布时间】：2020-03-15 13:28:20
【问题描述】：

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

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

【问题讨论】：

澄清一下，当用户选择一个选项时，您希望该字段填充所选内容，然后突出显示文本，以便用户可以通过单次击键删除内容。只需为 Backspace 击键创建回调以删除整个字段就足够了吗？
这是一个很好的解决方法，但突出显示值会让用户更容易预测。

标签： jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

你会与 jQueryUI 争夺焦点，但你可以通过设置超时来解决这个问题，这样你的焦点就会发生在 jQueryUI 完成后的下一个 js 周期。

您可以使用 AutoComplete 的焦点事件：

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

然后构建一个函数，选择文本并将其聚焦在下一个循环中

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

这是一个有效的 sn-p

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>

【讨论】：

【解决方案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
});

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

如果要高亮，可以写一个高亮函数在focus中使用，并在Select回调中触发。

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

注意，自动完成中的focus 与菜单项有关。所以我们为字段本身调用.on("focus")。

或者当你把焦点放在一个菜单项上时做这一切：https://jsfiddle.net/Twisty/7m9qs3wc/19/

【讨论】：

第一种方法似乎并不可靠。见here。