Dynamic data source in Bootstrap-3-Typeahead

Question

I'm working with https://github.com/bassjobsen/Bootstrap-3-Typeahead, and it is fine with Bootstrap 3.

I have following issue. Right now I have a jQuery trigger to input:

$.get('my_url?query=inter', function(data){
     $("#some_input").typeahead({ source:data }); 
},'json');

As you can see the script is reaching remote file. And it is fine but I would like to have query variable be dynamic. when user inputs the value to input then parameter will be changing.

I'm PHP guy so I got stuck with this jQuery... Can someone help to find solution?

Answer 1

You could bind the query construction to the input event of your field, e.g. :

$('#typeahead').on('input', function() {
  var dynamicQuery = 'my_url?query=' + $(this).val();
  $('.query').html(dynamicQuery);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input id="typeahead" type="text" />
<p class="query">my_url?query=</p>

In your case, you would replace :

$('.query').html(dynamicQuery);

by

$.get(dynamicQuery, function(data){
 $("#some_input").typeahead({ source:data }); 
},'json');