始终在 jQuery 自动完成中显示一个字符串，即使它与输入字符串不匹配
Posted
技术标签:
【中文标题】始终在 jQuery 自动完成中显示一个字符串，即使它与输入字符串不匹配【英文标题】：Always show a string in jQuery Autocomplete even if it doesn't match input string 【发布时间】：2019-07-11 10:30:50 【问题描述】：我知道同样的问题发布在：Always show a specific choice in jQuery Autocomplete even if it doesn't match input
问题是当使用上述问题中建议的打开功能作为解决方案时，仅当自动完成列表中有匹配项时才会触发该事件。因此，当用户在搜索框中输入时，并不总是显示特定的选择。
https://jsfiddle.net/u1jwz6s4/
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
</body>
</html>
$( "#autocomplete" ).autocomplete(
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ],
open: function()
$('.ui-autocomplete').prepend("search by keyword")
,
);
我想始终在最顶部显示“搜索为关键字”作为选项，无论用户在搜索框中输入时是否有匹配的字符串。目前，“搜索为关键字”仅在找到匹配字符串时显示在顶部。另外，是否有使“搜索为关键字”成为搜索表单中的可点击事件？请参阅 jsfiddle 以了解我所描述的内容。
【问题讨论】：
你能举例说明一下吗 【参考方案1】：您可以使用response 选项将unshift search by keyword 字符串添加到显示的标签数组中：
const $input = $("#autocomplete");
$input.autocomplete(
source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
response: (event, ui) =>
const label = 'search by keyword';
ui.content.unshift(
label,
value: $input.val()
);
);
$(document).on('click', '.ui-autocomplete div:contains("search by keyword")', () =>
console.log('searching for ' + $input.val());
);<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">【讨论】：
如何提交点击时在搜索框中输入的实际关键字值，而不是覆盖实际值的“按关键字搜索”？ 拥有一个实际上是用作按钮的自动完成标签非常奇怪——我认为这会让用户感到非常困惑。但是如果你不得不做这样的事情，你可以在click div 上为click 事件使用事件委托，请参阅编辑
正是我想要完成的。谢谢。
哦，jQuery 选项，而不是属性。请参阅here - 您可以选择uiAutocomplete 菜单对象并在open 处理程序中调用menu.focus(null, $('li', menu.element).eq(1));。
用户已经将注意力集中在输入字段上，所以只听输入字段上的输入？在非输入字段jsfiddle.net/pv8g5ct4 上按 Enter 是没有意义的以上是关于始终在 jQuery 自动完成中显示一个字符串，即使它与输入字符串不匹配的主要内容，如果未能解决你的问题，请参考以下文章
使用 React Material-UI 自动完成始终显示默认选项