类型前瞻搜索出现重复记录

Question

我正在使用 typeahead.js 实现自动完成搜索，但是在搜索框中输入时，在建议下拉列表中每条记录都出现了两次。我检查了数据源（即 POST api 调用），它只有唯一的记录。我错在哪里了？请帮忙或提供相关链接。

甚至控件也没有进入重复项检测器。

类似问题在这里讨论过，但没有解决方案。

  <div id="bloodhound">
        <input class="typeahead" type="text" placeholder=" Search">
    </div>


<script>
        var result = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,

            remote: {
                url: 'https://api1.com/idocs/api',
                wildcard: '%QUERY',
                rateLimitWait: 300 ,
                transport: function (opts, onSuccess, onError) {
                    var url = opts.url;
                    $.ajax({
                        url: url,
                        type: "POST",
                        success: onSuccess,
                        error: onError,
                    });


                },
                filter: function (data) {
                    if (data) {
                        return $.map(data, function (object) {
                            return data.data.results.data;
                        });
                    } 
                }
            },
            dupDetector: function (remoteMatch, localMatch) {
                return remoteMatch.id === localMatch.id;
            }
        });
        result.initialize();
        $('input').typeahead(null, {
            name: 'result',
            displayKey: 'id',
            source: result.ttAdapter(),
            templates: {
                empty: ['<div>', 'no results found', '</div>'],
                suggestion: function (data) {
                    return '<p>' + data.basicinfo.object_name + '</p>';

                }

            },
        });

- F11

---

你能否创建一个jsbin或jsfiddle来重现错误？如果不行，你能否重构你的代码，删除任何非必要的内容（模板、提示、绑定等），看看发生了什么？在你的过滤函数中使用console.log来查看它正在做什么？ - trenthaynes

在过滤函数中加入console.log - filter: function (data) { console.log(data); if (data) { return $.map(data, function (object) { console.log(object); console.log(data.data); console.log(data.data.results); console.log(data.data.results.data); return data.data.results.data; }); } } - trenthaynes

你的筛选函数对我来说没有意义。你应该在map函数内处理对象，但你却忽略了它而使用了"data"。 - trenthaynes

@F11 你应该发布你的解决方案并将其标记为答案。 - trenthaynes

如果你得到了答案，那么你应该将其标记为已回答。 - M.A.K. Ripon

Answer 1

我发现解决方案了，我在筛选方面做错了。我的解决方案是：

var result = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,

            remote: {
                url: 'abc.com&qterm=#%QUERY',
                wildcard: '%QUERY',
                rateLimitWait: 300 ,
                transport: function (opts, onSuccess, onError) {
                    var url = opts.url.split("#")[0];
                    var query = opts.url.split("#")[1];
                    $.ajax({
                        url: url + query,
                        type: "POST",
                        success: onSuccess,
                        error: onError,
                    });


                },
                filter: function (data) {
                    if (data) {
                        var result = data.data.results.data;
                        return $.map(result, function (object) {
                            return { name: object.basicinfo.object_name, id: object.basicinfo.id };
                        });
                    } else {
                        return {};
                    }
                }
            },
            dupDetector: function (remoteMatch, localMatch) {
                return remoteMatch.id === localMatch.id;
            }
        });
        function onSuccess(data) {
        }
        result.initialize();
        $('input').typeahead(null, {
            hint: true,
            name: 'result',
            displayKey: 'name',
            source: result.ttAdapter(),
            templates: {
                empty: ['<div class="empty-message">', 'no results found', '</div>'].join('\n'),
                suggestion: function (data) {
                    return '<p class="type-suggestion">' + data.name + '</p> \n\r';
                }
            },

        })

- F11