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

Posted 2023-05-08

【中文标题】使用箭头键浏览结果时在 jQuery UI 自动完成上触发“选择”事件

【英文标题】：Trigger 'select' event on jQuery UI Autocomplete when browsing results with arrow keys

【发布时间】：2020-03-15 13:28:20

【问题描述】：

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

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

【问题讨论】：

澄清一下，当用户选择一个选项时，您希望该字段填充所选内容，然后突出显示文本，以便用户可以通过单次击键删除内容。只需为 Backspace 击键创建回调以删除整个字段就足够了吗？

这是一个很好的解决方法，但突出显示值会让用户更容易预测。

【参考方案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。