template - Usa las colecciones Meteor para Typeahead Bloodhound, preferiblemente sin hacer mi propia API

typeahead remote

Question

Quiero construir una entrada de etiquetas como la de StackOverflow. Intento usar las colecciones de Meteor como datos remotos o de captación previa para Typeahead Bloodhound porque quiero usar Bootstrap Tokenfield .

De acuerdo con su documentación y ejemplos, una url a los datos JSON es absolutamente necesaria. ¿Cómo puedo proporcionar los datos, preferentemente de forma reactiva, a Bloodhound? Revisé el paquete Meteor Typeahead , pero no puedo encontrar la forma de usarlo con el paquete Meteor Tokenfield .

Debajo está lo que he tratado de hacer, pero no funciona. :(

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

Prefiero no crear una API, pero si tengo que hacerlo, ¿cómo proporciono los datos?

Answer 1

Este mensaje de código utiliza:

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

Answer 2

Dedique bastante tiempo tratando de que el tokenfield funcione de manera reactiva con mi colección Meteor, así que también publicaré mi solución aquí.

Terminé no usando Bloodhound para nada, sino que usé Meteor directamente. Me doy cuenta de que la búsqueda de RegEx es bastante primitiva, pero si lo que estás buscando es una colección de etiquetas, hace el trabajo.

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