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控制器），以确定必须从数据库中检索哪种数据。

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查询（在这种情况下，是艺术家列表中的查询，还是位置列表）。

但问题是第二个“先行者”返回的值与第一个（艺术家列表）相同。我假设这是因为侦听器附加到对象«myTypeahead»，这样使用的“data-role”属性将始终是相同的。

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

也许我做错了，但至少也许你们有人可以给我一个提示。对不起，如果已经讨论过，我实际上搜索过但没有成功。

提前致谢，Clem （来自法国，对不起我的英语）

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

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

1 个答案: