为什么 Bootstrap 预先输入对具有相同 ID 的输入元素不起作用? [英] Why is Bootstrap typeahead not working for input elements with same ID?

问题描述

我的 HTML 结构是这样的:

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

我的javascript如下:

car = getcar();$("#car").click(function() {$('#car').typeahead({来源:汽车，项目:10});});

getcar() 是使用 ajax

获取源数据的函数

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

我现在该怎么办?

解决方案

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

Ajax 调用

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

您必须使用回调，您可以查看 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');//禁用这个监听器，让它只被调用一次$.ajax(ajaxUrl, {类型:'帖子'，数据:ajaxData}).完成(功能(数据){//初始化 typeahead 插件$this.typeahead({来源:数据});警报('激活！');//好的 ！});});

基于标记

My HTML structure is like this :

<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>

My javascript is given below:

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

getcar() is function which is getting source data using ajax

It is showing typeahead for only first input element not for second input element

What should i do now?

解决方案

There are a few points that may cause your problems.

Ajax call

There is no way you can get data from an ajax request by simply calling data = getData();.

You have to use callbacks, you can check the basic examples on the jQuery docs

Duplicate IDs

HTML element IDs must be different on the same page. Check the w3.org doc. Instead you could use classes like <input class="car" ... and the jQuery selector $('.car')

Typeahead initialization

The Typeahead plugin should only be initialized once. If you bind some event to activate the plugin, then you should unbind this event so that it isn't called again.

---

Here is an example that you could adapt to your situation, with its 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 !
    });
});

Based on the markup

<input type="text" class="typeahead" />
<input type="text" class="typeahead" />

这篇关于为什么 Bootstrap 预先输入对具有相同 ID 的输入元素不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！