Twitter Bootstrap Typeahead doesn't load ajax data

Question

I have the following code in place to initialize typeahead using version 2.3.0:

jQuery('#search_terms').typeahead({
    source: function(query, process) {
        return jQuery.ajax({
            url: '/api/path',
            type: 'GET',
            data: {q: query},
            dataType: 'json',
            success: function (json) {
                return process(json.suggestion);
            }
        });
    }
});

I've verified that typeahead works by substituting static data. I've seen that json.suggestion evaluates to a single word as expected. The ajax response itself looks like this:

{"suggestion":"word"}

However, Bootstrap refuses to load the response into typeahead. What am I missing? I admit that I'm having trouble finding detailed documentation of Bootstrap Typeahead via ajax other than here on SO.

Thanks in advance.

score 5 · Accepted Answer · answered Feb 13 '13 at 17:51

We found that Bootstrap Typeahead was second-guessing our ajax data with its own matching filter. By forcing the match to be true we resolved this issue:

jQuery('#search_terms').typeahead({
    source: function(query, process) {
        jQuery.ajax({
            url: 'api/path',
            type: 'GET',
            data: {q: query},
            dataType: 'json',
            success: function (json) {
                process([json.suggestion]);
            }
        });
    },
    matcher: function (param) {return true}
});

Twitter Bootstrap Typeahead doesn't load ajax data

1 Answers1