使用 typeahead 和 JSON 仅适用于第一个字母

Question

正在搜索 Typeahead 和 Bloodhound 文档.我找到了一种读取 JSON 并在 this question 上过滤它的方法，但没有别的。似乎单词识别没有按预期工作。请有此 sn-p 经验的人可以启发我了解我所缺少的内容。

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

datumTokenizer 是错误的。

我不太了解这部分，但我发现在我尝试过的所有变体中似乎都有效。标记器需要引用您要返回的对象。因此，将分词器从默认更改为：

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

另外，我建议更改为 remote 而不是 prefetch，除非您确定返回的数据量非常小。

Here is a link 到一个工作示例。