Why is my datumTokenizer never getting called?

这一生的挚爱 提交于 2019-12-22 11:11:41

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!