始终在jQuery自动填充中显示特定选项,即使它与输入不匹配

Question

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

以下是javascript代码.我不包括服务器端代码,但是假设服务器的结果在下拉列表中创建了一个列表,例如"Add New,Betty,Bob,Cathy,Dan,Edward".'selector'是text类型的标准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时,我需要在列表中看到"Add New,Bill,Betty"作为我的三个选择但是现在我只看到"Bill,Betty"因为有"添加新"中没有"b".

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

非常感谢你提前.

Answer 1

我认为自动完成功能会将检索到的对象集合构建为无序列表.喜欢 - >

<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()处理它).