追加並保留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/