javascript - Duplicate records coming in typeahead search

Question

I am implementing typeahead search using typeahaead.js but as type in typeahead searchbox, in suggestions dropdown each records is coming twice.I checked the datasource(that is POST api call),it has only unique records.where am I doing wrong?Any help or relevant links.

Even control is not going to dup detector.

Similar issue discussed here,but no solution is there.

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

                }

            },
        });

Answer 1

I found the solution,i was doing wrong in filter. My solution is

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('
'),
                suggestion: function (data) {
                    return '<p class="type-suggestion">' + data.name + '</p> 

';
                }
            },

        })