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

Question

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

您可以使用 this jsfiddle copied from 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
});

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

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

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

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

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

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

Trigger 'select' event on jQuery UI Autocomplete when browsing results with arrow keys

jquery

jquery-ui

jquery-ui-autocomplete