Bootstrap Typeahead with AJAX source: not returning array as expected

Question

I am having a lot of trouble getting bootstraps typeahead to work properly with an AJAX source. If I alert out the array that is being returned it is perfectly fine, even when I hard code it to test it. It seems to return nothing most of the time or only a few items from the array when you have typed in a near match. Here is what I have at the moment: ``` $('#companyNameInput').typeahead({ source: function(query, process){ $.ajax({ url: ROOT+'Record/checkCompanyName', async: false, data: 'q='+query, type: 'POST', cache: false, success: function(data) { companiesFinal = []; map = {}; companies = $.parseJSON(data); $.each(companies, function(i, v){ map[v.name] = v.id; companiesFinal.push(v.name); }) } }) process(companiesFinal); // return ['test1', 'test2'] This works fine return companiesFinal; } ``` Does anyone have an idea why this is working properly? Here is an example of the object array returned from my PHP script. Objects with IDs 1 and 1216 show up on the typeahead dropdown, bu…

Accepted Answer

Update 2

Ah, your service returns items that actually don't match the query `parm`. Your typeahead query is `'parm'`, with which none of the returned results match. You can override the `matcher` function used by the typeahead plugin, see the docs. Simply implement it as `return true` to match all results returned by your service.

Update 1

This is an updated version, that maps the name to an id, which can be used later. A jsfiddle is available.

```
var nameIdMap = {};

$('#lookup').typeahead({
    source: function (query, process) {
        return $.ajax({
            dataType: "json",
            url: lookupUrl,
            data: getAjaxRequestData(),
            type: 'POST',
            success: function (json) {
                process(getOptionsFromJson(json));
            }
        });
    },
    minLength: 1,
    updater: function (item) {
        console.log('selected id'+nameIdMap[item]);
        return item;
    }
});

function getOptionsFromJson(json) {
    $.each(json, function (i, v) {
        nameIdMap[v.name] = v.id;
    });

return $.map(json, function (n, i) {
        return n.name;
    });
}
```

Original answer

You need to make the call async and call the `process` callback from within the success callback like this:

```
$('#companyNameInput').typeahead({
    source: function (query, process) {
        $.ajax({
            url: ROOT + 'Record/checkCompanyName',
            // async: false, // better go async
            data: 'q=' + query,
            type: 'POST',
            cache: false,
            success: function (data) {
                var companiesFinal = ... // snip
                process(companiesFinal);
            }
        })
    }
});
```

The `return ['test1', 'test2'];` works, because the source function is then basically set to:

```
// do ajax stuff, but do nothing with the result
// return the typeahead array, which the typeahead will accept as the result:
return ['test1', 'test2'];
```

Notes

There is a one-liner to fill `companiesData`:

```
var companiesFinal = return $.map(data, function (n, i) { n.name; });
```

And you probably want to declare your variables using `var`; otherwise they'll have global scope, which will bite you.

Bootstrap Typeahead with AJAX source: not returning array as expected

Solution

Problem