3

Я хочу построить теги, как те, что в StackOverflow. Я пытаюсь использовать коллекции Meteor как данные удаленной или предварительной выборки для TypeaheadBloodhound, потому что я хочу в конечном итоге использовать Bootstrap Tokenfield.Использование коллекций Meteor для Bloodhound Typeahead, желательно без создания моего собственного API

В соответствии с их документацией и примерами обязательно требуется URL-адрес данных JSON. Как я могу предоставить данные, предпочтительно реактивно, 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, но если я должен, как я могу предоставить данные

+0

Я не смотрел на TokenField пока нет, но вы рассматривали использование пакета [Автозаполнение] (http://autocomplete.meteor.com) и перенос над этой функциональностью от Bootstrap в случае необходимости? Другой альтернативой ввода тегов является [Select2] (https://atmospherejs.com/?q=select2). –

+0

Да, я это рассмотрел. Однако, поскольку первое предложение моего сообщения гласит: «Я хочу создать теги, подобные тому, что находится в StackOverflow». Предлагаемые решения не учитывают это требование. Разве вы не знаете, как заставить их это сделать? – FullStack

+0

пытаясь сделать то же самое ... –

ответ

0

Потратьте некоторое время, пытаясь получите tokenfield, чтобы работать с моей коллекцией Meteor, поэтому я просто отправлю свое решение здесь.

Я закончил тем, что не использовал Bloodhound вообще, но вместо этого просто использовал M eteor. Я понимаю, что поиск в 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 
     } 
    }] 
}); 
Смежные вопросы