javascript - Bootstrap - 在多个输入上预先输入

Question

我有两个文本输入，都必须运行自动完成。该网站正在使用 Bootstrap 和“typeahead”组件。我有这个 HTML:

<input type="text" class="js_typeahead" data-role="artist" />
<input type="text" class="js_typeahead" data-role="location" />

我使用“data-role”属性(作为 $_POST 索引发送到 Ajax Controller )，以确定必须从数据库检索哪种数据。

Javascript 是这样的:

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);
  }); } });

使用 PHP，我检查什么 $_POST['data-role']包含运行 MySQL 查询(在本例中是对艺术家列表或位置列表的查询)。

但问题是第二个“typeahead”返回与第一个“typeahead”相同的值(艺术家列表)。我认为这是因为监听器附加到对象“myTypeahead”，这样使用的“data-role”属性将始终相同。

我想我可以通过使用类似的方法来修复它: data_role = $(this).attr('data-role');但当然这是行不通的，因为它的范围不同。

也许我做错了，但至少也许你们可以给我一个提示。抱歉，如果已经讨论过这个问题，我实际上进行了搜索，但没有成功。

预先感谢，克莱姆(来自法国，对不起我的英语)

Answer 1

在这种情况下，您将需要迭代元素，getter 方法仅返回第一个选定元素的值。

$('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);
            }); 
     } 
});