javascript - 为什么 Bootstrap typeahead 不适用于具有相同 ID 的输入元素？

Question

我的 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 元素显示 typeahead，而不为第二个 input 元素显示 typeahead

我现在该怎么办？

Answer 1

有几点可能会引起您的问题。

Ajax调用

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

你必须使用回调，你可以查看jQuery docs上的基本示例

重复 ID

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

预输入初始化

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

---

这是一个您可以根据自己的情况进行调整的示例，其 working demo (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" />