我想要实现的是,当用户搜索结果时,最后的结果始终是“添加新”的选项。
即使没有更多可用结果,我也想保留该选项。因此,当自动完成没有更多结果时,它仍然显示“添加新”选项。该选项应仅在该字段失去焦点后消失。
到目前为止,我可以显示该选项,但在可用结果耗尽后无法将其保留在那里。我不知道如何处理这部分?
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);
}
});
});
答案 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);
}
}
});
});