3

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?

4

3 に答える 3

2

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" />
于 2012-08-25T18:55:04.177 に答える
1

You can't use the same ID twice. Try this (not tested, but you should get the idea):

<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 is given below:

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

I have a dynamic DOM so, i use this: For each new element, i give a random id, then activate typeahead on this element, by id

$( "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 に答える