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

                }

            },
        });

Sometime

Can you create a jsbin or jsfiddle to reproduce the error? If not that, can you refactor your code to remove anything non-essential (templates, hint, bind, etc) and see what's going on? Console.log in your filter function to see what it is doing? – Synagogue

put a console.log in the filter function - 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; }); } } – Synagogue

The filter function as you've got it doesn't make sense to me. You should be dealing with object inside the map function, but you ignore it for "data" instead. – Synagogue

data.data.results.data is a collection of object,i need this data.data.results.data[index].basicinfo of each index.object has nothing related to data only two functions procto & status – Sometime

@Sometime there could be a typo in your filter (map) function. You have function(object) and in the function body you refer to data which is a variable for outside of that function. Change it to $.map(data, function (data) { return data.data.results.data; }); – Superload

As you suggested in the question I see this is not fixed in issues.liferay.com/browse/AUI-846 – Pelagic

@Sometime Can you provide a sample of the returned data? Something that reflects the complete structure of the data that you see from the web api you are calling. I think there is a mismatch between your return data and how you are filtering it for use in the typeahead. – Synagogue

@Sometime You should post your resolution and mark it as the answer. – Synagogue

If you got the answer then you should marked it as answered. – Alleged

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

        })

Sometime