CODEWITHSUNDEEP
ajaxtwitter-bootstrapbootstrap-typeaheadtypeahead
Skytiger
Skytiger

Reputation: 1845

Twitter-bootstrap typeahead dulicates

I've managed to create a working twitter typeahead ajax call.

I'm having a problem where items are duplicated when typing too fast.

Example scenario:

When trying to get "Casablanca" you'd start typing, and expect that by the time you reach "casa" it will be relatively well filtered. Unfortunately the items are duplicated, so that instead of having 2 or 3 options, I'll have between 9 and 20 D:

Here's the JS that is doing the call:

$(".airportSearch").typeahead({
    source: function(query, process) {
        airports = [];
        map = {};

        $.ajax({
            url: url_,
            dataType: "json",
            data: {
                n: 12, q: query
            },
            success: function(data) {
                    $.each(data, function (i, record) {
                    map[record.airport] = record;
                    airports.push(record.city + ", " + record.airport + " (" + record.iata + "), " + record.country);
                });

                process(airports);
            }
        });
    },
    minLength: 1,
    items: 11,
    sorter: function (items) {
        return items.sort();
    },
    updater: function (item) {
        selectedState = map[item].iata;
        return item;
    }
});

It works perfectly fine if I type slowly, but as we all know I can't expect people to be patient!

By the time I've typed "casa" the response from the servlet I'm calling is just 3 records long:

[
{"type":"airport","city":"Casablanca","airport":"Anfa","iata":"CAS","country":"Morocco","locationId":"airport_CAS"},
{"type":"airport","city":"Casablanca","airport":"Mohammed V","iata":"CMN","country":"Morocco","locationId":"airport_CMN"},
{"type":"airport","city":"Casa Grande Municipal, AZ","airport":"Casa Grande Municipal","iata":"CGZ","country":"United States","locationId":"airport_CGZ"}
]

Unfortunately there seems to be some tomfoolery going on in there somewhere, that I have been unable to find. By the time I've typed "casa", the "airports" object that is being processed looks like this:

["Casablanca, Anfa (CAS), Morocco", 
"Casablanca, Mohammed V (CMN), Morocco", 
"Casa Grande Municipal, AZ, Casa Grande Municipal (CGZ), United States",
"Cascade Locks, OR, Cascade Locks (CZK), United States",
"Cascavel, Cascavel (CAC), Brazil",
"Casigua, Casigua (CUV), Venezuela",
"Casino, Casino (CSI), Australia",
"Casper, WY, Casper (CPR), United States",
"Cassilandia, Cassilandia (CSS), Brazil",
"Castaway, Castaway (CST), Fiji",
"Castlegar, Castlegar (YCG), Canada",
"Castres Mazamet, Castres Mazamet (DCM), France", 
"Castro Gamboa, Castro Gamboa (WCA), Chile", 
"Casablanca, Anfa (CAS), Morocco",
"Casablanca, Mohammed V (CMN), Morocco", 
"Casa Grande Municipal, AZ, Casa Grande Municipal (CGZ), United States",
"Casablanca, Anfa (CAS), Morocco", 
"Casablanca, Mohammed V (CMN), Morocco",
"Casa Grande Municipal, AZ, Casa Grande Municipal (CGZ), United States"]

As you can see, there are duplicates of the 3 results I'm expecting at the time, as well as duplicates of records that should have been filtered out by this time.

Do I need to somehow wait between calls, or do some check for duplicates? I'm not very sure how to approach this problem, and would appreciate some input or suggestions.

Upvotes: 3

Views: 751

Answers (1)

Skytiger
Skytiger

Reputation: 1845

Solved the problem by moving 

airports = [];

inside the success function.

Upvotes: 5

Related Questions