使用Tokenfield从jQuery自动完成中删除项目

时间:2014-08-22 21:04:47

标签: jquery jquery-autocomplete

我尝试从jQuery自动完成下拉菜单中删除项目。我正在使用此库(用于标记化)https://github.com/sliptree/bootstrap-tokenfield和jQuery自动完成。

这是我的HTML:

<input class='form-control' id='tokenfield' type='text'>

我的js:

DROPDOWN = ['one', two', 'three', 'four', 'five'];
  $("#tokenfield").tokenfield({
    autocomplete: {
      source: DROPDOWN,
      delay: 100
    },
    showAutocompleteOnFocus: true
  }); 


$("#tokenfield").on("tokenfield:createtoken", function(event) {
    selectedToken = event.attrs.value;
    // remove selectedToken from the autocomplete source
  });

有一种简单的方法吗?提前感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

来自the docs(请参阅methods section的结尾处):

  

您还可以从上面的原始输入设置自动完成或打字对象的新选项,如下所示:$('#tokenfield').data('bs.tokenfield').$input.autocomplete({source: new_array})

所以,假设您的回调设置得很清楚并且我正在使用正确的方法来检索现有的令牌,那么它将是这样的:

$("#tokenfield").on("tokenfield:createtoken", function(event) {
    var selectedToken = event.attrs.value;
    var existingTokens = $('#tokenfield').tokenfield('getTokens', false);

    // Removing item from array is left as exercise to reader
    var newTokens = removeFromArray(existingTokens, selectedToken);

    // Per docs
    $('#tokenfield').data('bs.tokenfield').$input.autocomplete(
        {source: newTokens});
});