Question

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?

Answer 1

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