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

【问题标题】：Why is my datumTokenizer never getting called?为什么我的 datumTokenizer 永远不会被调用？
【发布时间】：2015-05-19 18:35:50
【问题描述】：

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

【问题讨论】：

这里返回 Bloodhound.tokenizers.obj.whitespace(d);你的 insteaf 传递字符串值 Bloodhound.tokenizers.obj.whitespace("name")
虽然它甚至没有命中那个代码。 datumTokenizer 函数中没有任何内容被调用。
@StephenHorvath 你有没有远程工作？

标签： typeahead.js bloodhound

【解决方案1】：

这是工作示例http://jsfiddle.net/x7pLsb79/

我稍微修改了一下。我使用本地而不是远程数据，但两者的工作方式相同。

html

<input id="city_or_zip" class="typeahead"></input>

 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>';
            }
        }
    });

【讨论】：

谢谢。问题是我想编写自己的标记器。当我将 datumTokenizer 变量设置为我的函数时，它永远不会被调用。
emm，我不知道你想得到什么作为最后的结果，对不起。但是如果你想像这样（datumTokenizer：Bloodhound.tokenizers.obj.whitespace（“mytoken”） ),我猜你首先需要过滤结果,filter:function(data){ return newarray}

【解决方案2】：

远程数据没有被索引，正如开发人员在this issue 中解释的那样。有一个提交将其添加为选项。顺便说一句，twitter typeaheadjs 项目目前已被放弃，所以谁知道何时该提交可能会被合并。在 fork 周围有一些移动，提交可能会被合并（请参阅here）。

【讨论】：

【解决方案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"
        }
    }
}]

【讨论】：

天哪，这真是太棒了！！！我在使用本地对象数组处理我的 Bloodhound 实例时遇到问题，我在谷歌上搜索了很多并阅读了文档，但我没有看到有关如何正确处理自定义对象数组的示例。我的问题已像您在此处所做的那样使用 datumTokenizer 解决。非常感谢！！