1

我有两个文本输入，都必须运行自动完成。该站点正在使用 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 查询（在这种情况下，查询艺术家列表或位置列表）。

但问题是第二个“typeahead”返回与第一个相同的值（艺术家列表）。我认为这是因为侦听器附加到对象« myTypeahead »，这样使用的“数据角色”属性将始终相同。

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

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

提前感谢，克莱姆（来自法国，对不起我的英语）

4

1 回答 1

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);
            }); 
     } 
});
于 2012-11-15T16:57:47.423 回答