问题
I put a breakpoint inside the datumTokenizer function, but it never seems to get called. Why not? Does it work with remote-only 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:
[
{
"id":568,
"state":"al",
"city":"pittsview"
},
{
"id":4095,
"state":"ga",
"city":"pitts"
}
]
回答1:
Here is the working example http://jsfiddle.net/x7pLsb79/
I little bit modified.instead of remote data I used local ,but both works same way.
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:
Remote data is not indexed, as the developer explained in this issue. There is a commit to add that as an option. Incidentally, the twitter typeaheadjs project is currently abandoned, so who knows when that commit may be merged in. There's some movement around a fork where the commit will probably be merged in (see here).
回答3:
A good solution
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>'
}
}
});
}
Example json
[{
"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"
}
}
}]
来源:https://stackoverflow.com/questions/30333522/why-is-my-datumtokenizer-never-getting-called