Bootstrap Tokenfield与Typeahead / Bloodhound排除令牌



我使用bootstrap-tokenfield与typeahead/bloodhound。

我可以防止在tokenfield中使用相同的令牌两次,但是相同的令牌仍然出现在typeahead响应中。如何排除已存在于令牌字段中的令牌?

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();
    }
  });
});

更新了过滤器函数,以删除已在令牌字段中的用户:

var engine = new Bloodhound({
        remote: {
            url: API_URL + '?action=message_friends&q=%QUERY',
            filter: function (response) {
                var tagged_user = $('#to-tags').tokenfield('getTokens');
                return $.map(response.users, function (user) {
                    var exists = false;
                    for (i=0; i < tagged_user.length; i++) {
                        if (user.user_id == tagged_user[i].value) {
                            var exists = true;
                        }
                    }
                    if (!exists) {
                        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({
        delimiter: false,
        typeahead: [
            {
                hint: false
            }, 
            {
                name: 'users',
                displayKey: 'label',
                source: engine.ttAdapter()
            }
        ]
    })
    .on('tokenfield:createtoken', function (e) {
        var existingTokens = $(this).tokenfield('getTokens');
        if (existingTokens.length) {
            $.each(existingTokens, function(index, token) {
                if (token.value === e.attrs.value) {
                    e.preventDefault();
                }
            });
        }
    });

相关内容

  • 没有找到相关文章

最新更新