type suggest plugin examples bootstrap autocompletado javascript jquery typeahead typeahead.js bloodhound

javascript - suggest - Typeahead.js-Buscar en mĂșltiples valores de propiedad



type head bootstrap (3)

Por favor, vea el ejemplo a continuación.

JSFiddle: http://jsfiddle.net/R7UvH/2/

¿Cómo hago que typeahead.js ( typeahead.js ) busque coincidencias en más de un valor de propiedad? Idealmente, dentro de data completos ( data.title , data.desc y en todos los data.category[i].name )

datumTokenizer: function(data) { // **search in other property values; e.g. data.title & data.desc etc..** return Bloodhound.tokenizers.whitespace(data.title); },

Todo el ejemplo:

var data = [{ title: "some title here", desc: "some option here", category: [{ name: "category 1", }, { name: "categoy 2", }] }, { title: "some title here", desc: "some option here", category: [{ name: "category 1", }, { name: "categoy 2", }] }]; var posts = new Bloodhound({ datumTokenizer: function(data) { // **search in other property values; e.g. data.title & data.desc etc..** return Bloodhound.tokenizers.whitespace(data.title); }, queryTokenizer: Bloodhound.tokenizers.whitespace, local: data }); posts.initialize(); $(''#search-input'').typeahead({ highlight: true }, { name: ''Pages'', displayKey: ''title'', source: posts.ttAdapter(), templates: { header: ''<h3>Pages</h3>'' } });


He implementado una solución aquí:

http://jsfiddle.net/Fresh/4nnnG/

Como tiene un origen de datos local, necesita crear conjuntos de datos individuales para permitirle hacer coincidir en múltiples propiedades de datos. p.ej

$(''#search-input'').typeahead({ highlight: true }, { name: ''titles'', displayKey: ''title'', source: titles.ttAdapter() }, { name: ''descs'', displayKey: ''desc'', source: descs.ttAdapter() }, { name: ''cats'', displayKey: ''name'', source: cats.ttAdapter() });


Typeahead 0.10.3 agregó "compatibilidad con tokenizadores de objeto para tokenización de propiedades múltiples".

Entonces, tu ejemplo se convierte en

var posts = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace(''title'', ''desc''), queryTokenizer: Bloodhound.tokenizers.whitespace, local: data });

Sin embargo, no creo que esto funcione para las propiedades anidadas en el interior, es decir, el objeto data.category en su caso.

Como nota al margen, si está usando datos precargados, asegúrese de borrar primero el almacenamiento local; de lo contrario, el nuevo tokenizador no tendrá efecto (porque se usa datumTokenizer al agregar al índice de búsqueda, y si los datos ya están presentes en el localStorage , entonces el índice de búsqueda no se actualizará). ¡Estuve atrapado en esto por un tiempo!


return Bloodhound.tokenizers.whitespace(data.title) devuelve una matriz de cadenas.

Entonces, en lugar de devolver ese valor: guárdalo (y tus otros valores deseados), luego concaténalos y devuelve ese valor ...

x = Bloodhound.tokenizers.whitespace(data.title); y = Bloodhound.tokenizers.whitespace(data.desc); z = Bloodhound.tokenizers.whitespace(data.category[i].name); return x.concat(y).concat(z);