I'm tring to use typeahead, in special typeahead for Bootstrap 3 in order to allow a user search some contents in a database:
Results from query are like this:
[{"id":1,"name":"Viajes Alaniz-Santiago","contact_name":"Carlota Pab\u00f3n","email":"ona22@rosaesteve.es"},{"id":9,"name":"Rodrigo y Alcaraz y Asoc.","contact_name":"Yago Calder\u00f3n","email":"pablo.cuellar@toro.es"},{"id":18,"name":"Global Carbajal","contact_name":"Joel Verduzco","email":"pablo.lucio@santana.es"},{"id":19,"name":"Ocasio de Ni\u00f1o y Flia.","contact_name":"Carlos Ocasio","email":"wposada@global.es"},{"id":24,"name":"Valles y Jaramillo S. de H.","contact_name":"Sra. Carolina P\u00e1ez","email":"plaza.erika@herrero.com.es"},{"id":32,"name":"Centro Est\u00e9vez-Caraballo","contact_name":"Alejandra Marroqu\u00edn","email":"ybravo@espinal.com.es"},{"id":43,"name":"Asociaci\u00f3n Olivas-Carbajal","contact_name":"Angela Anaya","email":"noa63@puig.com"}]
So when user inputs a QUERY database it's actually looking up at name and contact_name fields in a table. For example, in the example above Car was the query and so result Carlota Pabón in contact_name was included.
I'm settip up typeahead with Bloodhound like this:
var engine = new Bloodhound({
name: 'contact_name',
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name','contact_name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: '/search/providers?query=%QUERY'
});
engine.initialize();
$("#providersSearchInput").typeahead({
source: engine.ttAdapter(),
minLength: 3,
items: 15,
});
I thought datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name','contact_name') will make the trick as this answer suggests but it's not working.
How should I set it up? And how can I obtain the selected object, that's when I achieve displaying matches in contact_name too and user selects Carlota Pabón, I want to obtain {"id":1,"name":"Viajes Alaniz-Santiago","contact_name":"Carlota Pab\u00f3n","email":"ona22@rosaesteve.es"} as selected object.
Edit, what I also tried:
Having more datums neither worked:
var name = new Bloodhound({
datumTokenizer: function (data) {
return Bloodhound.tokenizers.whitespace(data.name);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: '/search/providers?query=%QUERY'
});
var contact_name = new Bloodhound({
datumTokenizer: function (data) {
return Bloodhound.tokenizers.whitespace(data.contact_name);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: '/search/providers?query=%QUERY'
});
name.initialize(); contact_name.initialize();
$("#providersSearchInput").typeahead({
source: name.ttAdapter(),
minLength: 3,
items: 15,
},
{
source: contact_name.ttAdapter(),
minLength: 3,
items: 15
});
