为什么我删除jquery ui中的项目时不会对其进行更新

班加罗尔

我在使用jQuery UI自动完成删除时遇到问题，

我无法删除所选项目以进行下一次迭代。

问题：我想在每次导出时删除所选项目，并且availableTags应该绑定到$("#tags")自动完成功能，因此，我将随时获得所有标签，但永久导出的标签除外。

注意：我正在采用这种方法，因为我将拥有更多50000 tags

这是我的代码：

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

mplungjan

您需要从列表中删除标签，并使标签成为全局标签

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。