我如何从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>