为 Typeahead Bloodhound 使用 Meteor 集合，最好不要制作我自己的 API答案

【问题标题】：Use Meteor collections for Typeahead Bloodhound, preferably without making my own API为 Typeahead Bloodhound 使用 Meteor 集合，最好不要制作我自己的 API
【发布时间】：2014-11-05 15:06:32
【问题描述】：

我想构建一个标签输入，就像 StackOverflow 中的一样。我正在尝试使用 Meteor 集合作为Typeahead Bloodhound 的远程或预取数据，因为我最终想使用Bootstrap Tokenfield。

根据他们的文档和示例，JSON 数据的 url 是绝对需要的。如何向 Bloodhound 提供数据，最好是被动地？我查看了Meteor Typeahead package，但我不知道如何将它与Meteor Tokenfield package 一起使用。

以下是我尝试做的，但它不起作用。 :(

<div class="control-group">
    <label class="control-label" for="users">Users</label>
    <div class="controls">
      <input type="text" class="form-control" id="tokenfield-typeahead-users" value="" />
    </div>
</div> 

Template.viewUsers.rendered = function() {
    var users = new Bloodhound({
      datumTokenizer: function(d) {
        return Bloodhound.tokenizers.whitespace(d.username);
      },
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      limit: 20,
      remote: {
        // url points to a json file that contains an array of tokens
        url: function() { 
          return Meteor.users.find().fetch().map(function(user){ return user.username; }); 
        }
      }
    });

    users.initialize();// kicks off the loading/processing of `local` and `prefetch`

    // passing in `null` for the `options` arguments will result in the default
    // options being used
    $('#tokenfield-typeahead-users').tokenfield({
      typeahead: [null, { 
        name: 'users',
        displayKey: 'username',
        source: users.ttAdapter() 
        // `ttAdapter` wraps the suggestion engine in an adapter that
        // is compatible with the typeahead jQuery plugin
      }]
    });
};

我不想构建 API，但如果必须，我如何提供数据？

【问题讨论】：

我还没有看过 TokenField，但是您是否考虑过使用 autocomplete 包，并在必要时从 Bootstrap 移植该功能？标签输入的另一种替代方法是Select2。
是的，我考虑过这些。然而，正如我帖子的第一句话所说，“我想构建一个标签输入，就像 StackOverflow 中的一样。”您建议的解决方案不能满足此要求。除非你知道如何让他们这样做？
尝试做同样的事情...

标签： meteor twitter-typeahead bloodhound bootstrap-tokenfield

【解决方案1】：

This code posting 使用：

    local: [{ val: 'dog' }, { val: 'pig' }, { val: 'moose' }],

【讨论】：

【解决方案2】：

花了很多时间尝试让tokenfield 与我的 Meteor 集合反应性地工作，所以我也将在这里发布我的解决方案。

我最终没有使用 Bloodhound，而是直接使用 Meteor。我意识到 RegEx 搜索非常原始，但如果您搜索的是标签集合，它就可以完成工作。

var currentTags = []; // Handle this however you wish

$('#tokenfield').tokenfield({
    typeahead: [null, {
        name: 'tags',
        displayKey: 'value',
        source: function(query, syncResults, asyncResults) {

            var suggestedTags = Tags.find({value: {
                $regex: "^"+query,
                $options: "i",
                $nin: currentTags
            }}).fetch();

            syncResults(suggestedTags);
            //Optionally do some server side lookup using asyncResults
        }
    }]
});

【讨论】：