Bootstrap - Typehead on multiple inputs
- by Clem
I have two text intputs, both have to run an autocompletion. The site is using Bootstrap, and the « typeahead » component. I have this HTML :
<input type="text" class="js_typeahead" data-role="artist" />
<input type="text" class="js_typeahead" data-role="location" />
I'm using the « data-role » attribute (that is sent to the Ajax controller as a $_POST index), in order to determine what kind of data has to be retrieved from the database.
The Javascript goes this way :
var myTypeahead = $('input.js_typeahead').typeahead({
source: function(query, process){
var data_role;
data_role = myTypeahead.attr('data-role');
return $.post('/ajax/typeahead', { query:query,data_role:data_role },function(data){
return process(data.options);
}); } });
With PHP, I check what $_POST['data-role'] contains, an run the MySQL query (in this case, a query either on a list of Artists, or a list of Locations).
But the problem is the second "typeahead" returns the same values than the first one (list of Artists). I assume it's because the listener is attached to the object « myTypeahead », and this way the "data-role" attribute which is used, will always be the same.
I think I could fix it by using something like :
data_role = $(this).attr('data-role');
But of course this doesn't work, as it's a different scope.
Maybe I'm doing it all wrong, but at least maybe you people could give me a hint. Sorry if this has already been discussed, I actually searched but without success.
Thanks in advance, Clem (from France, sorry for my english)
