我如何從jQuery UI自動完成呈現列表中刪除項目

Question

我想從jquery-ui autocomplete呈現列表中刪除item

假設該物品是康普頓

問題 ：我想從外部渲染item “康普頓”，而不是從 select,create,open等輔助功能中刪除

下面是我的代碼：

  $(function() { var availableTags = [ "john", "khair", "compton", "Jordan", "Micheal", "Peter" ]; $( "#tags" ).autocomplete({ source: availableTags }).focus(function () { $("#tags").autocomplete("search"); }); // logic to remove item "compton" must reflect in rendered ui }); 

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="ui-widget"> <label for="tags">Search: </label> <input id="tags"> </div> 

Answer 1

嘗試使用為自動完成功能設置一個或多個選項的option 方法 。

 $(function() { var availableTags = [ "john", "khair", "compton", "Jordan", "Micheal", "Peter" ]; $("#tags").autocomplete({ source: availableTags }).focus(function() { $("#tags").autocomplete("search"); }); $("#tags").autocomplete("option", "source", availableTags.filter(i => i !== "compton")); }); 

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="ui-widget"> <label for="tags">Search: </label> <input id="tags"> </div>