Two types of bootstrap on one page with two different source functions

Question

I would like two different text inputs to have typeahead, each with a different source function. For example, you get first_names and other last_names.

Here's how it looks and doesn't work:

$('#first_name').typeahead({ source: function (query, process) { $.get('/users/typeahead-first-name', { term: query }, function (data) { return process(JSON.parse(data)); }); } }); $('#last_name').typeahead({ source: function (query, process) { $.get('/users/typeahead-last-name', { term: query }, function (data) { return process(JSON.parse(data)); }); } }); 

The first typeahead works fine. However, the second one, when I start to enter text and the parameters begin to appear, then I press the button, the drop-down menu just closes and no value is entered in the input field.

Has anyone figured out how to make it work?

Answer 1

It may be a little late to help you, but I had the same problem in my application. The solution was to add the "name" attributes, for example:

 $('#first_name').typeahead({ name: 'first_name', source: function (query, process) { $.get('/users/typeahead-first-name', { term: query }, function (data) { return process(JSON.parse(data)); }); } }); $('#last_name').typeahead({ name: 'last_name', source: function (query, process) { $.get('/users/typeahead-last-name', { term: query }, function (data) { return process(JSON.parse(data)); }); } }); 

It doesn’t matter that I named them in my code if they were different. This also makes sense, since typeahead stores the response cache. (Although I would have thought that they simply bound the cache to the instance to which you are binding it, but ...)