F11 F11 - 6 months ago 26
jQuery Question

Duplicate records coming in typeahead search

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

}

},
});

F11 F11
Answer

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

        })
Comments