追加并保留jQuery的附加元素ui-autocomplete

Question

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

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

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

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); 
      } 
    }); 
}); 

Answer 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/