3

我的 HTML 结构是这样的：

<div class="controls">
<input id="car" class="span3" type="text"  placeholder="B.E" autocomplete="off" value="" name="car[]">
</div>

<div class="controls">
<input id="car" class="span3" type="text"  placeholder="B.E" autocomplete="off" value="" name="car[]">
</div>

我的javascript如下：

car = getcar();
$("#car").click(function() {
$('#car').typeahead({
    source: car,
    items: 10
});
});

getcar()是使用获取源数据的函数ajax

它仅显示第一个input元素而不是第二个input元素的预输入

我现在该怎么办？

4

3 回答 3

2

有几点可能会导致您的问题。

阿贾克斯调用

您无法通过简单地调用来从 ajax 请求中获取数据data = getData();。

您必须使用回调，您可以查看jQuery 文档上的基本示例

重复的 ID

同一页面上的 HTML 元素 ID 必须不同。检查w3.org 文档。相反，您可以使用类<input class="car" ...和 jQuery 选择器$('.car')

预输入初始化

Typeahead 插件应该只初始化一次。如果你绑定了一些事件来激活插件，那么你应该取消绑定这个事件，这样它就不会被再次调用。

这是一个示例，您可以通过其工作演示（jsfiddle）适应您的情况

$('.typeahead').on('click.typeaheadonce', function() {
    var $this = $(this)
    $this.off('click.typeaheadonce'); // Disable this listener so that it's called only once
    $.ajax(ajaxUrl, {
        type: 'post',
        data: ajaxData
    }).done(function(data) {
        // initialize the typeahead plugin
        $this.typeahead({
            source: data
        });
        alert('activated!'); // Ok !
    });
});

基于标记

<input type="text" class="typeahead" />
<input type="text" class="typeahead" />
于 2012-08-25T18:55:04.177 回答
1

您不能两次使用相同的 ID。试试这个（未经测试，但你应该明白）：

<div class="controls">
<input id="car1" class="typeahead span3" type="text"  placeholder="B.E" autocomplete="off" value="" name="car[]">
</div>

<div class="controls">
<input id="car2" class="typeahead span3" type="text"  placeholder="B.E" autocomplete="off" value="" name="car[]">
</div>

javascript如下：

car = getcar();
$(".typeahead").click(function() {
$('.typeahead').typeahead({
    source: $(this),
    items: 10
});
});
于 2012-08-25T17:03:18.417 回答
1

我有一个动态 DOM，所以我使用这个：对于每个新元素，我给一个随机 id，然后通过 id 在这个元素上激活 typeahead

$( "body" ).on( "click", ".typeahead", function() {
  if( $(this).data('autocomple_ready') != 'ok' ){
      $(this).attr('id',Math.round(new Date().getTime() +(Math.random() * 100)));
      var assigned_id=$(this).attr('id');
      $('#'+assigned_id).typeahead({
          hint: true,
          highlight: true,
          minLength: 4,
          delay:500,
          source: function (query, process) {
              return $.post('put_your_url_here',{ 'query': query },
                  function (data) {
                      return process(data);
                  },'json');
          },
          displayText: function(item){ return item.name;}

      });  
    };
    $(this).data('autocomple_ready','ok');
  });
于 2017-05-22T10:17:27.213 回答