javascript - 为什么我在 jquery ui 中的项目在我删除它时没有更新

Question

我有 jquery ui 自动完成删除的问题，

我无法为下一次迭代删除所选项目。

问题:我想在每次导出时删除选定的项目，availableTags 应该绑定(bind)到 $("#tags") 自动完成，所以，我将随时获取所有标签，永久导出的标签除外。

注意:我正在遵循这种方法，因为我将拥有超过 50000 标签

这是我的代码:

$(function() {
  var availableTags = [

  ];
  for (var i = 0; i < 5000; i++) {
    availableTags.push('abc' + i);
  }
  $("#tags").autocomplete({
    minLength: 0,
    source: function(request, response) {
      var results = $.ui.autocomplete.filter(availableTags, request.term);

      response(results.slice(0, 10));
    }
  }).focus(function() {
    $("#tags").autocomplete('search');
  });

  $('#exportPer').click(function() {
    var pExp = $('#tags').val();
    console.log('permanently exported tag : ', pExp + '  , it wont be availabe in list');
    var placeholderList = $("#tags").autocomplete("option", "source");

    var index = placeholderList.indexOf(pExp);

    console.log('spliced', placeholderList.splice(index, i));


  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


<div style="margin-top: -22px; margin-right: 79px; float: right;">
  <button id="exportPer">Export Permanantely</button>
</div>

Answer 1

您需要从列表中删除标签并将标签设为全局

var availableTags = [];

function listTags(request, response) {
  var results = $.ui.autocomplete.filter(availableTags, request.term);
  response(results.slice(0, 10));
}

$(function() {
  for (var i = 0; i < 5000; i++) {
    availableTags.push('abc' + i);
  }
  $("#tags").autocomplete({
    minLength: 0,
    source: listTags
  }).focus(function() {
    $("#tags").autocomplete('search');
  });

  $('#exportPer').click(function() {
    var pExp = $('#tags').val();
    var index = availableTags.indexOf(pExp);
    if (index !=-1) {
      availableTags.splice(index, 1);
      console.log('permanently exported tag : ', pExp + '  , it wont be availabe in list');
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


<div style="margin-top: -22px; margin-right: 79px; float: right;">
  <button id="exportPer">Export Permanantely</button>
</div>