Question

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)

Answer 1

In this case you will need to iterate through the elements, getter methods only return the value of the first selected element.

$('input.js_typeahead').each(function(){
    var myTypeahead = $(this).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){
                process(data.options);
            }); 
     } 
});