【问题标题】:Bootstrap Tokenfield with Typeahead / Bloodhound exclude tokensBootstrap Tokenfield 与 Typeahead / Bloodhound 排除令牌
【发布时间】:2014-07-09 22:29:23
【问题描述】:

我正在使用带有 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();
    }
  });
});

【问题讨论】:

    标签: typeahead.js bootstrap-typeahead bloodhound bootstrap-tokenfield


    【解决方案1】:

    更新了过滤功能,移除了已经在token字段中的用户:

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

    【讨论】:

    • 当我使用此代码 url:API_URL + '?action=message_friends&q=%QUERY',并将其作为已发布标题的一部分进行检查时,post 变量值为 %Query 而不是实际值。有什么问题?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-03-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多