twitter bootstrap typeahead for multiple input in the same page

Question

I'm using twitter bootstrap typeahead and I have these two java script functions to init the auto complete

  function autocomplete1(phr_type) { 
                $('.typeahead').typeahead({                                
                   name: 'arabic',                                                             
                   remote: '/ajax/autocomplate?type='+1+'&q=%QUERY',                                         
                   limit: 10 ,
                   valueKey : 'arabic_term',

                  });
}

function autocomplete2(phr_type) {
      $('.typeahead2').typeahead({                                
         name: 'arabic',                                                             
         remote: '/ajax/autocomplate?id=3&q=%QUERY',                                         
         limit: 10 ,
         valueKey : 'arabic_term',

        });
}

and I have two input

<input type="text" class="typeahead2"/>

<input type="text" class="typeahead"/>

and I init the auto complete using

$(document).ready(function(){
    autocomplete1();
    autocomplete2();
});

but all request take the parameter from first function the id parameter not send in the second input when I type inside the second input.

the query parameter working well in the two function but Id not send, only the first parameter send.

so all the request will be like :

GET http://host/ajax/autocomplate?type=1&q=xy
GET http://host/ajax/autocomplate?type=1&q=zx

what i have to do solve that and send dynamic parameter.

Thanks

Answer 1

Try to use a different name in both plugin instantiation.