Mit typeahead und JSON funktioniert nur der erste Buchstabe

Question

Auf der Suche nach Typeahead und Bloodhound docs habe ich nichts hilfreiches gefunden, was ich falsch mache, weil ich nur Vorschläge bekomme, wenn ich den ersten Buchstaben tippe, aber ich tippe weiter Wort und es geht um keinen Treffer gefunden. Ich habe eine Möglichkeit gefunden, JSON zu lesen und sie unter this question zu filtern, aber sonst nichts. Scheint, dass die Worterkennung nicht wie beabsichtigt funktioniert. Bitte jemand mit Erfahrung mit diesem Ausschnitt könnte mich aufklären, was ich vermisse.

JAVASCRIPT

var globalCats = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.whitespace, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    limit: 10, 
    prefetch: { 
     url: 'js/data.json', 
     filter: function (list) { 
      return $.map(list, function (item) { 
      return { 
       nombre: item.nombre, 
       id: item.id, 
       padre: item.padre 
      }; 
     }); 
    } 
    } 
}); 

globalCats.initialize(); 
    $('.typeahead').typeahead({ 
     highlight: true 
    }, 
    { 
     name: 'recomendaciones', 
     displayKey: 'nombre', 
     source: globalCats.ttAdapter(), 
     templates: { 
      empty: [ 
       '<div class="card red white-text"><strong>No hay sugerencias para su búsqueda</strong></div>' 
      ].join('\n'), 
      suggestion: Handlebars.compile('<div class="card"><a href="busqueda.php?catid={{id}}"><strong>{{nombre}}</strong> - Departamento {{padre}}</a></div>') 
      } 
    }); 

HTML

<form class="col s12 z-depth-1"> 
    <div class="row"> 
      <div class="col s12"> 
       <p>Ingrese sus términos de búsqueda o de click en Solicitar Servicio para publicar su requerimiento en sus redes sociales.</p> 
      </div> 
      <div class="input-field col s12 m9"> 
       <input id="buscador" type="text" placeholder="VEAMOS" class="typeahead"> 
      </div> 
    </div> 
</form> 

JSON

[ 
    { 
     "nombre": "Operadores de Taladradoras", 
     "id": 111454, 
     "padre": "Construcción" 
    }, 
    { 
     "nombre": "Operadores de Maquinaria", 
     "id": 454654, 
     "padre": "Construcción" 
    }, 
    { 
     "nombre": "Estilistas", 
     "id": 454678, 
     "padre": "Belleza" 
    } 
] 

Answer 1

Die datumTokenizer ist falsch.

Ich verstehe diesen Teil nicht sehr gut, aber ich habe gefunden, was in all den Variationen funktioniert, die ich ausprobiert habe. Der Tokenizer muss auf das Objekt verweisen, das Sie zurückgeben. So ändern Sie die tokenizer von der Standardeinstellung dies:

Bloodhound.tokenizers.obj.whitespace('nombre'), 

Auch würde ich empfehlen remote Wechsel statt prefetch, wenn Sie sicher sind, dass die Menge zurückgegebenen Daten sehr klein sein wird.

Here is a link zu einem Arbeitsbeispiel.