我如何从jQuery UI自动完成呈现列表中删除项目

Question

i want to remove item from jquery-ui autocomplete rendered list

let say the item is compton

Question : i want to remove item "compton" once it is rendered from outside NOT from helper functions like select,create,open etc

Below is my code:

  $(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

Try using option method which sets one or more options for the autocomplete.

 $(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>