Bootstrap3 Typeahead - Calling a function in 'Remote'

Question

I upgraded to Bootstrap version 3.0 and I do see that the typeahead module does not exist. I am using web services and I had used the following method to call my function and populate my dataset. However, with the twitter typeahead.js, how do I call my function or how do I still use the old typeahead module? Your help is much appreciated. Thanks.

            $("#searchVendor").typeahead({
            source: function (query) {
                    vieModel.callWebServiceFunctionList(counter1, query, isListCleared);   
       });

Answer 1

Typeahead.js doesn't have a way of directly using a function as the source . The standard way to pass a query value is with a URL string containing %QUERY in the remote property:

$("#searchVendor").typeahead({
            remote: '.../data.json?name=%QUERY'   
});

However, this probably isn't enough in your case. remote can also be an object, with a url and a replace function that is applied to the URL.

So, make a function like callWebServiceFunctionList that just returns the URL instead of actually calling the web service.

$("#searchVendor").typeahead({
            remote: {
               url: '.../data.json?counter=%COUNTER&query=%QUERY&isListCleared=%ISLISTCLEARED',
               replace: function(url, query) {
                  return url.replace('%COUNTER', counter1).replace('%QUERY', query).replace('%ISLISTCLEARED', isListCleared);
               }
});

See the docs for the remote object.

Alternatively, you could get the JS for just the typeahead portion of Bootstrap 2.x, and while you might run into problems with the formatting, it seems to work fine by itself (JSFiddle demo).