javascript - 将附加元素附加并保留到 jQuery ui-autocomplete

Question

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

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

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

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

这是一个 fiddle 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);
            }
    });
});

Answer 1

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

$(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/