将附加元素追加并保存到jQuery ui-autocomplete

时间:2015-07-20 22:29:40

标签: javascript jquery jquery-ui autocomplete

我想要实现的是,当用户搜索结果时,最后的结果始终是“添加新”的选项。

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

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

Append one link to jquery ui autocompleteAdd 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);
            }
    });
});

1 个答案:

答案 0 :(得分:3)

尝试添加消息,说明找不到任何结果。由于您已经为“开放”事件添加了一个回调,它将自然而然地出现。见下面的小提琴。

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