twitter bootstrap typeahead 2.0.4 ajax error

Question

I have the following code which definitely returns a proper data result if I use the 2.0.0 version, but for some reason bootstrap's typeahead plugin is giving me an error. I pasted it below the code sample:

<input id="test" type="text" />

$('#test').typeahead({
    source: function(typeahead, query) {
        return $.post('/Profile/searchFor', { query: query }, function(data) {                
            return typeahead.process(data);
        });
    }
});

When I run this example I'm getting a jQuery bug that says the following:

**
item is undefined
matcher(item=undefined)bootst...head.js (line 104)
<br/>(?)(item=undefined)bootst...head.js (line 91)
<br/>f(a=function(), b=function(), c=false)jquery....min.js (line 2)
<br/>lookup(event=undefined)bootst...head.js (line 90)
<br/>keyup(e=Object { originalEvent=Event keyup, type="keyup", timeStamp=145718131, more...})bootst...head.js (line 198)
<br/>f()jquery....min.js (line 2)
<br/>add(c=Object { originalEvent=Event keyup, type="keyup", timeStamp=145718131, <br/>more...})jquery....min.js (line 3)
<br/>add(a=keyup charCode=0, keyCode=70)jquery....min.js (line 3)
<br/>[Break On This Error]  
<br/>return item.toLowerCase().indexOf(this.query.toLowerCase())**

Any thoughts? ... The same code works in the 2.0.0 version of the plugin, but fails to write to my knockout object model.

THIS IS WORKING TYPEAHEAD CODE FOR the 2.0.0 version:

var searchFunction = function(typeahead, query) {
        $.ajax({
            url: "/Profile/searchFor?tableName=" + tableName + "&query=" + query + "&extendedData=" + $("#" + extendedData).val(),
            success: function(data) {
                if (data.errorText != null) {
                    toggleLoading("false");
                    showDialog(data.errorText, "Error");
                    return;
                }                
                var result = data.results.split("::");
                typeahead.process(result);
            },
            select: function(event, ui) {
            }
        });
    }

    $("#" + inputBoxId).typeahead({
        source: searchFunction,
        onselect: function(obj) {
        }
    });

Answer 1

1) Bootstrap typeahead v2.0.2 solution

have a look at this pull request, it looks like what you're looking for (its a fork from bootstrap typeahead v2.0.2).

I use it myself and it's working :)

2) Bootstrap typeahead v.2.1.0-work in progress solution

Also you can try this solution. I just changed my project to use this one, becouse it's gonna be supported in future versions and it looks cleaner :)

In my case:

$("#typeahead").typeahead({
  source: function(query, process) {
    $.post('url_path', { q: query, limit: 4 }, function(data) {
      process(data);
    }); // end of post
  }
});

Where script url_path requiers 2 arguments q (string) and limit (results limit) and returns json response (array):

Example response to query i with limit 4:

["Eminem","Limp Bizkit","Rihanna","Will Smith"]

Answer 2

On version 2.0.4 typeahead is buggy and does not accept functions as source, only arrays. I upgraded to 2.1 and it works as expected.

Answer 3

For people trying to generate the JSON data (without using php json_encode) and wondering why bootstrap-typeahead fork by Terry Rosen won't work on ajax call

The format of the returned JSON data has to be of the form :-

[{"id":"1","name":"Old car"},{"id":"2","name":"Castro trolley car"},{"id":"3","name":"Green classic cars"},{"id":"4","name":"Cars parked in Antique Row"}]

Note the quotes

Having spent the whole day trying to figure out what the problem was, i thought it would be wise to post it here. Maybe, my understanding of JSON was wrong, but firebug shows the returned data as valid JSON even if the id and name fields are not quoted. Moreover, the response header should be set to 'application/json'. Hope this helps someone.