3

StackOverflow のようなタグ入力を作成したいと考えています。最終的にBootstrap Tokenfieldを使用したいので、 Typeahead Bloodhoundのリモートまたはプリフェッチ データとして Meteor コレクションを使用しようとしています。

ドキュメントと例によると、JSON データへの URL は絶対に必要です。Bloodhound にデータを (できれば事後的に) 提供するにはどうすればよいですか? Meteor Typeahead パッケージを調べましたが、Meteor Tokenfield パッケージでの使用方法がわかりません。

以下は私がやろうとしたことですが、うまくいきません。:(

<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 を作成したくないのですが、必要な場合、どのようにデータを提供すればよいですか?

4

2 に答える 2

0

を Meteor コレクションでリアクティブに動作させるためにかなりの時間を費やしたtokenfieldので、ここにもソリューションを投稿します。

結局、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
        }
    }]
});
于 2015-11-18T11:46:02.810 に答える
0

このコード投稿では以下を 使用します。

    local: [{ val: 'dog' }, { val: 'pig' }, { val: 'moose' }],
于 2015-06-25T11:48:16.590 に答える