当有一个远程结果时,Typeahead远程返回两个未定义

时间:2014-03-10 19:24:44

标签: javascript typeahead.js typeahead twitter-typeahead

我正在构建一个从远程json API搜索信息的方法。由于数据集非常大(3000+),我无法预取任何数据,为了获得预取的结果,我需要提供单个字母查询。

我遇到的问题是,当我在搜索中找到一个结果时,Typehead会停止给我结果,并且只显示两个未定义的项目。

这就是它的样子:

screenshot

此时我已经通过控制台尝试了所有我想到的东西来尝试调试这个但却找不到任何地方可以看到这些数据的来源。

这是Bloodhound和typeahead初始化的代码。

var items = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.k);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: App.target + "crm/sf/list/item/%QUERY/5",
        filter: function (parsedResponse) {
            return parsedResponse.Listing.list.entries;
        },
    }
});

items.initialize();

$('#itemNoSrch').typeahead(null, {
    autoselect: true,
    displayKey: 'k',
    source: items.ttAdapter()
}).on('typeahead:selected', function (obj, datum, name) {
    App.searchData.itemNo = datum.k.replace("/", "*");

    $('#itemSrchPlaceholder').val(datum.k);
    App.itemInvalid = false;
});

编辑:

以下是crm / sf / list / item /%QUERY / 5的JSON响应,其中查询为。

{
"Listing": {
        "list": {
            "entries": [
                {
                    "k": "A-10-10",
                    "v": 1320
                },
                {
                    "k": "A-10-7",
                    "v": 4841
                },
                {
                    "k": "A-10-8",
                    "v": 4821
                },
                {
                    "k": "A14YV4835",
                        "v": 1327
                },
                {
                    "k": "A0554835",
                    "v": 1325
                }
            ]
        }
    }
}

以下是我只能假设输出正在出现时,我在Google Chrome的最新稳定版本上使用了控制台。

enter image description here

我会提供一个基于API的小提琴,但服务器目前不会添加跨源标题。

请告知我们所需的任何其他信息。

1 个答案:

答案 0 :(得分:4)

我发现了问题!我的远程数据集在作为一个结果时作为对象而不是数组返回。

输出看起来像这样。

{
"Listing": {
    "list": {
        "entries": {
            "k": "A-10-10",
            "v": 1320
        }
    }
}

所以我在过滤器中添加了以下内容

filter: function (parsedResponse) {
        if(parsedResponse.Listing.list.entries instanceof Array){
            return parsedResponse.Listing.list.entries;
        }else{
            return [parsedResponse.Listing.list.entries];
        }
    },