始终在 jQuery 自动完成中显示特定选项，即使它与输入不匹配

Always show a specific choice in jQuery Autocomplete even if it doesn't match input

本文关键字：选项 不匹配 输入 显示 jQuery      更新时间：2023-09-26

我有一个jQuery自动完成（jquery ui版本1.8），我在其中输入了一个名称。 如果可用，我希望用户从列表中选择一个名称，因为这些是我们数据库中的所有者名称。 但是，有时他们需要添加新的所有者名称，在这种情况下，我希望他们从自动完成的下拉列表中选择"添加新"。 问题是，如果我在自动完成源数据中包含"新增"作为选项，它不会在自动完成下拉列表中显示为选项，因为它与用户在文本框中键入的内容不匹配。

下面是JavaScript代码。 我没有包括服务器端代码，但假设服务器的结果在下拉列表中创建了一个列表，例如"添加新、贝蒂、鲍勃、凯茜、丹、爱德华"。 "选择器"是文本类型的标准 html 输入字段。

    $('.selector').autocomplete({
        autoFocus: false,
        minLength: 1,
        focus: function (event, ui) {
            $('.selector').val(ui.item.value);
            return false;
        },
        select: function (event, ui) {
            $('.selector').val(ui.item.value);
            return false;
        }
    });
    $('.selector').keyup(function(){
        // Each time a new character is entered, recreate the drop down list by matching entered characters to beginning of first name field
        $.ajax({
            type: "POST",
            url: "(url to c#.net asmx page and method)",
            contentType: "application/json; charset=utf-8",
            data: '{(various data parameters)}',
            datatype: "json",
            error: function (data) {
                var data = $.parseJSON(data.responseText);
                alert("Error: " + data.Message);
            },
            success: function (data, status, info) {
                if (data.hasOwnProperty("d")) {
                    var nameList = data.d;
                }
                else {
                    var nameList = data;
                }
                $('.selector').autocomplete("option", "source", nameList);
            }
        });
    });

我意识到我已经从 ajax 调用的 url 和数据部分的 javascript 代码中删除了几个块，但我认为这没关系，因为获取自动完成的"源代码"不是这里的问题。

例如，当我输入字母b时，我需要看到"添加新，比尔，贝蒂"

作为我在列表中的三个选择，但现在我只看到"比尔，贝蒂"，因为"添加新"中没有"b"。

关于如何使"添加新"选项始终可用的任何想法或解决方案？

提前非常感谢你。

我认为自动完成功能将检索到的对象集合构建到无序列表中。 如 ->

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 1</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 2</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 3</a>
  </li>
</ul>

它还具有检测何时使用 open 事件打开列表的方法。

$('selector').autocomplete({
  open: function(){
    $('.ui-autocomplete').prepend('<li class="ui-menu-item"><a class="ui-corner-all ui-add-new"> Add New </a></li>');
  }
});
您可以看到，当自动完成下拉菜单

打开时，我们已经在自动完成下拉菜单中添加了一个列表项，因此您始终在列表顶部看到"添加新"（jQuery的.prepend（）处理它）。

相关文章：