jquery - Bootstrap-3-Typeahead 中的动态数据源

Question

我正在与 https://github.com/bassjobsen/Bootstrap-3-Typeahead 合作，并且使用 Bootstrap 3 就可以了。

我有以下问题。现在我有一个 jQuery 触发器可以输入:

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

正如您所看到的，脚本正在到达远程文件。这很好，但我希望查询变量是动态的。当用户输入要输入的值时，参数将发生变化。

我是 PHP 人员，所以我被这个 jQuery 困住了......有人可以帮助找到解决方案吗？

Answer 1

您可以将查询构造绑定(bind)到字段的输入事件，例如:

$('#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>

就您而言，您将替换:

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

由

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