向 jQuery ui-autocomplete 追加和持久化附加元素答案

【问题标题】：Append and persist additional element to jQuery ui-autocomplete向 jQuery ui-autocomplete 追加和持久化附加元素
【发布时间】：2015-07-21 13:49:55
【问题描述】：

我想要实现的是，当用户搜索结果时，最后一个结果总是“添加新”的选项。

即使没有更多可用结果，我也想保留该选项。所以当自动完成没有更多结果时，它仍然显示“添加新”选项。只有在字段失去焦点后，该选项才会消失。

到目前为止，我可以显示该选项，但在可用结果用尽后无法将其保留在那里。我不知道如何处理这部分？

Append one link to jquery ui autocomplete 和 Add additional link to jquery ui autocomplete list 没有帮助解决问题的持续部分。

这是一个小提琴https://jsfiddle.net/c01gat3/ufa70bza/

干杯。

$(function() {

    var addnew = '<li class="ui-menu-item" id="addnew" onClick="alert(\'add new customer\')">Add New Customer</li>';

    var availableTagsCustomerCode = [
    "ABCE001",
    "ABCD010",
    "BCDE100",
    "CDEF002",
    "DEFG020",
    "EFGH200",
    ];

    $( "#customer-code" ).autocomplete({
        source: availableTagsCustomerCode,

        'open': function(e, ui) {
                $(".ui-autocomplete").append(addnew);
            }
    });
});

【问题讨论】：

标签： javascript jquery jquery-ui autocomplete

【解决方案1】：

尝试添加一条消息，说明未找到任何结果。由于您已经为“打开”事件添加了回调，它会自然而然地出现。请参阅下面的小提琴。

$(function() {

var addnew = '<li class="ui-menu-item" id="addnew" onClick="alert(\'add new customer\')">Add New Customer</li>';

var availableTagsCustomerCode = [
"ABCE001",
"ABCD010",
"BCDE100",
"CDEF002",
"DEFG020",
"EFGH200"
];

$( "#customer-code" ).autocomplete({
    source: availableTagsCustomerCode,

    'open': function(e, ui) {
            $(".ui-autocomplete").append(addnew);
        },
    response: function(event, ui) {
        if (!ui.content.length) {
            var noResult = { value:"",label:"No results found" };
            ui.content.push(noResult);
        }
    }
});
});

https://jsfiddle.net/ufa70bza/2/

【讨论】：

哦，我喜欢这样！谢谢:)