预输入搜索中出现重复记录

Posted 2023-05-07

【中文标题】预输入搜索中出现重复记录

【英文标题】：Duplicate records coming in typeahead search

【发布时间】：2016-05-21 03:15:49

【问题描述】：

我正在使用 typeahaead.js 实现 typeahead 搜索，但作为 typeahead 搜索框中的类型，在建议下拉列表中每个记录都会出现两次。我检查了数据源（即 POST api 调用），它只有唯一的记录。我在哪里错了吗？任何帮助或相关链接。

即使控制也不会复制检测器。

类似问题discussed here，但没有解决方案。

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

                

            ,
        );

【问题讨论】：

你能创建一个 jsbin 或 jsfiddle 来重现错误吗？如果不是这样，你可以重构你的代码以删除任何非必要的东西（模板、提示、绑定等）并看看发生了什么？ Console.log 进入你的过滤函数看看它在做什么？

在过滤函数中放一个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); 返回 data.data.results.data; );

您拥有的过滤器功能对我来说没有意义。您应该在 map 函数中处理对象，但您将其忽略为“数据”。

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

如果您得到了答案，那么您应该将其标记为已回答。

【参考方案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';
                
            ,

        )