javascript - 如何从 jquery ui 自动完成渲染列表中删除项目

Question

我想从jquery-ui autocomplete渲染列表中删除item

假设该项目是compton

问题:一旦item“compton”从外部而不是辅助函数(例如select)渲染后，我想将其删除创建、打开等

下面是我的代码:

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

尝试使用选项 method它为自动完成设置一个或多个选项。

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