Using typeahead and JSON only works first letter

Question

Searching for Typeahead and Bloodhound docs I haven't found something helpful os what I'm doing wrong because I'm only getting suggestions when I type the first letter, but I continue typing the word and it goes to no match found. I found a way of reading JSON and filtering it on this question, but nothing else. Seems like word recognition isn't working as intended. Please someone with experience with this snippet could enlighten me on what I'm missing.

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"
    }
]

Which version of typeahead are you using? – trenthaynes Apr 07 '16 at 21:57 — trenthaynes, Apr 07 '16 at 21:57
@whipdancer Version 0.11.1 bundle file with Bloodhound – David Ortega Apr 08 '16 at 20:17 — David Ortega, Apr 08 '16 at 20:17
Do you have to use prefetch? can you use remote instead? – trenthaynes Apr 09 '16 at 03:15 — trenthaynes, Apr 09 '16 at 03:15

score 0 · Accepted Answer · answered Apr 09 '16 at 03:28

0

The datumTokenizer is wrong.

I don't understand this part very well, but I've found what seems to work in all the variations I've tried. The tokenizer needs to reference the object you are returning. So, change the tokenizer from the default to this:

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

Also, I would recommend changing to remote instead of prefetch unless you are certain that the amount data returned will be very small.

Here is a link to a working example.

answered Apr 09 '16 at 03:28

trenthaynes

1,668
2
16
28

yes this change on the datumTokenizer seems to be the thing :) could you tell me where did you learn or read about managing it? Docs on typeahead are kind of confusing. – David Ortega Apr 10 '16 at 03:59
It was more a cumulative thing. Reading, testing, reading, searching, testing dozen's of times. It took me a few to figure it out with yours because my default now is to put the searched field as the datumTokenizer, and I didn't notice it immediately with yours. – trenthaynes Apr 11 '16 at 13:34

Using typeahead and JSON only works first letter

1 Answers1