标签: bootstrap-tokenfield

具有Typeahead/Bloodhound的Bootstrap Tokenfield排除令牌

我正在使用带有typeahead/bloodhound的bootstrap-tokenfield.

我可以阻止在令牌字段中使用相同的令牌两次,但同样的令牌仍然出现在先行响应中.如何排除令牌字段中已有的令牌?

var engine = new Bloodhound({
  remote: {
    url: API_URL + '?action=message_friends&q=%QUERY',
    filter: function (response) {
      return $.map(response.users, function (user) {
        return {
          value: user.user_id,
          label: user.name
        };
      });
    }
  },
  datumTokenizer: function(d) {
    return Bloodhound.tokenizers.whitespace(d.value); 
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace    
);

engine.initialize();

$('#to-tags').tokenfield({
  typeahead: [
    {
      hint: false
    }, 
    {
      name: 'users',
      displayKey: 'label',
      source: engine.ttAdapter()
    }
  ]
}).on('tokenfield:createtoken', function (event) {
  var existingTokens = $(this).tokenfield('getTokens');
  $.each(existingTokens, function(index, token) {
    if (token.value === event.attrs.value) {
      event.preventDefault();
    }
  });
});
Run Code Online (Sandbox Code Playgroud)

bootstrap-typeahead typeahead.js bloodhound bootstrap-tokenfield

8
推荐指数
1
解决办法
4736
查看次数

使用Jquery Ui自动完成时如何使用Bootstrap Tokenfield防止重复

我试图用Jquery Ui自动完成实现Bootstrap Tokenfield, 到目前为止我能够做到这一点,除了我无法防止输入字段中的重复,所以,不幸的是我的用户可以选择相同的值两次.

在我的搜索中,我发现Bootstrap Tokenfield有一种防止重复的方法.但是我不知道如何应用于我的代码,因为它在我看来它与Twitter typeahead而不是Jquery Ui.

如何使用Jquery Ui自动完成功能防止使用Bootstrap TokenField重复?

这是我的基于jquery ui自动完成的Bootstrap TokenField代码

$('.tokenfield').tokenfield({
  autocomplete: {
    source: [
    {
        "id": "1",
        "value": "Ferdine Faithfull" 
    },
    {
        "id": "2",
        "value": "John Carta" 
    },
    {
        "id": "3",
        "value": "Mezane Smith" 
    }
    ],

    delay: 100
  },
  showAutocompleteOnFocus: true
});
Run Code Online (Sandbox Code Playgroud)

以下是我在Github上发现的防止重复虽然我认为它适用于Typeahead

$('#my-tokenfield').on('tokenfield:createtoken', function (event) {
    var existingTokens = $(this).tokenfield('getTokens');
    $.each(existingTokens, function(index, token) {
        if (token.value === event.attrs.value)
            event.preventDefault();
    });
});
Run Code Online (Sandbox Code Playgroud)

jquery-ui-autocomplete twitter-bootstrap bootstrap-tokenfield

8
推荐指数
1
解决办法
9543
查看次数