Question

我在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"
   }
]

Answer 1

以下是工作示例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>';
            }
        }
    });

Answer 2

正如开发人员在this issue中所解释的那样，未对远程数据编制索引。有一个提交添加它作为一个选项。顺便提一下，twitter typeaheadjs项目目前已被放弃，因此谁知道何时可以合并该提交。在fork中可能会合并提交（参见here）。

Answer 3

一个很好的解决方案

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"
        }
    }
}]

为什么我的datumTokenizer永远不会被调用？

3 个答案: