Why does my datumTokenizer never ring?
I put a breakpoint inside the datumTokenizer function, but it never makes a call. Why not? Does it work with remote access data?
var engine = new Bloodhound({
datumTokenizer: function(d) {
return Bloodhound.tokenizers.obj.whitespace(d);
},
queryTokenizer: Bloodhound.tokenizers.nonword,
identify: function( obj ) { return obj.id; },
remote: {
url: '/typeahead/%QUERY',
wildcard: '%QUERY'
},
limit: 5
});
$( '#city_or_zip' ).typeahead({
hint: true,
minLength: 2
}, {
display: function( data ) {
return formatCityState( data );
},
source: engine.ttAdapter(),
templates: {
empty: 'No results found',
suggestion: function ( data ) {
return '<p>' + formatCityState( data ) + '</p>';
}
}
});
JSON returned from remote device:
[
{
"id":568,
"state":"al",
"city":"pittsview"
},
{
"id":4095,
"state":"ga",
"city":"pitts"
}
]
+3
source to share
3 answers
Here is a working example http://jsfiddle.net/x7pLsb79/
I changed a little. I used local instead of remote data, but both work the same.
Html
<input id="city_or_zip" class="typeahead"></input>
Js
var dt=[
{
"id":568,
"state":"al",
"city":"pittsview"
},
{
"id":4095,
"state":"ga",
"city":"pitts"
}
];
var formatCityState= function(data){
return data.city+"*formated*"+data.state ;
}
var engine = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("city"),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local:dt
});
$( '#city_or_zip' ).typeahead({
hint: true,
minLength: 1
}, {
display: function( data ) {
return formatCityState( data );
},
source: engine.ttAdapter(),
templates: {
empty: 'No results found',
suggestion: function ( data ) {
return '<p>' + formatCityState(data) + '</p>';
}
}
});
+2
source to share
Deleted data is not indexed as the developer explained in this issue . There is a commit to add this as an option. By the way, the twitter typeaheadjs project is currently abandoned, so who knows when this commit might be merged. There is some movement around the fork where the commit is likely to be merged (see here ).
+2
source to share
Good decision
autocomplete:function(){
var branchOffice = $('#branch_office_id').val();
var productSource = new Bloodhound({
datumTokenizer: function(productObj) {
return Bloodhound.tokenizers.whitespace([productObj.product.name+' '+productObj.product.sku+' '+productObj.product.code+' '+productObj.product.category.name+' '+productObj.product.unit.name]);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: url_product+'/'+branchOffice,
cache: false,
}
});
$('#search_product').typeahead({
hint: true,
highlight: true,
minLength: 1
},{
name: 'name',
displayKey: function(data) {
return data.product.name;
},
limit: 10,
source: productSource.ttAdapter(),
templates: {
empty: function(){
return '<div class="widget-main"><div class="alert alert-danger">No encotramos coincidencias</div></div>'
},
suggestion: function (data){
return '<div>'+data.product.sku+' - '+data.product.name+' | '+data.product.code+' - '+data.product.category.name+' - '+data.product.unit.name+'</div>'
}
}
});
}
Json example
[{
"id":29,
"product_id":10,
"branch_office_id":6,
"quantity":0,
"price_n":"1.00",
"price_h":"1.00",
"stock_min":1,
"product":{
"id":10,
"category_id":4,
"unit_id":2,
"sku":"010100001",
"code":"KE-1000011",
"name":"SIN CATEGORIA",
"image":"\/image\/avatars\/no_photo.jpg",
"order":1000011,
"price_buy":"1",
"category":{
"id":4,
"order":1,
"code":"01",
"abr":"KE",
"name":"KENDA"
},
"unit":{
"id":2,
"code":"01",
"name":"PZA"
}
}
},
{
"id":33,
"product_id":11,
"branch_office_id":6,
"quantity":0,
"price_n":"1.00",
"price_h":"1.00",
"stock_min":1,
"product":{
"id":11,
"category_id":4,
"unit_id":2,
"sku":"010100002",
"code":"KE-324233434",
"name":"SDFSDFSDFSD",
"image":"\/image\/avatars\/no_photo.jpg",
"order":324233434,
"price_buy":"1",
"category":{
"id":4,
"order":1,
"code":"01",
"abr":"KE",
"name":"KENDA"
},
"unit":{
"id":2,
"code":"01",
"name":"PZA"
}
}
}]
+1
source to share