Почему мой datumTokenizer никогда не вызывается?
Я установил точку останова внутри функции datumTokenizer, но она никогда не вызывается. Почему бы и нет? Работает ли он с данными только для удаленного доступа?
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 вернулся из удаленного:
[
{
"id":568,
"state":"al",
"city":"pittsview"
},
{
"id":4095,
"state":"ga",
"city":"pitts"
}
]
3 ответа
Удаленные данные не индексируются, как пояснил разработчик в этом выпуске. Существует обязательство добавить это в качестве опции. Кстати, проект twitter typeaheadjs в настоящее время заброшен, поэтому кто знает, когда этот коммит может быть объединен. Есть некоторое движение вокруг развилки, где коммит, вероятно, будет объединен (см. Здесь).
Вот рабочий пример http://jsfiddle.net/x7pLsb79/
Я немного изменил. Вместо удаленных данных я использовал локальные, но оба работают одинаково.
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>';
}
}
});
Хорошее решение
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
[{
"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"
}
}
}]