Автозаполнение динамически созданных полей ввода с использованием jQuery и Typeahead

Question

Я пытаюсь получить автозаполнение с помощью Typeahead в динамически создаваемых входных полях. У меня есть следующий код:

HTML:

<div class="input_fields_wrap"> 
    <a href="#" class="add_field_button">Add More Fields</a> </br> 
    <div><input type="text" name="typeahead[]" class="typeahead tt-query" id="1"></div>  
    <div><input type="text" name="typeahead[]" class="typeahead tt-query" id="2"></div> 
</div> 

Javascript:

/***************Autocompletion***************/ 

       $(document).ready(function(){ 
       $('input.typeahead').typeahead({ 
        name: 'typeahead', 
        remote:'search.php?key=%QUERY', 
        limit : 10 
        }); 
       }); 


/***************Create Input fields dynamically***************/ 

        $(document).ready(function() { 
         var max_fields  = 10; //maximum input boxes allowed 
         var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
         var add_button  = $(".add_field_button"); //Add button ID 
         var x = 2; //initlal text box count 

         $(add_button).click(function(e) 
         { 
          if(x < max_fields) 
          { 
           x++; 
           $(wrapper).append('<div><input type="text" name="typeahead[]" class="typeahead tt-query" id="' + x + '"><a href="#" class="remove_field">Remove</a></div>'); //add input box 
          } 
         }); 

         $(wrapper).on("click",".remove_field", function(e) 
         { 
          $(this).parent('div').remove(); x--; 
         }) 
        }); 

Я могу создавать новые поля ввода, нажав на кнопку "добавить поля" ссылку. Автозаполнение двух существующих текстовых полей: also working. Но когда я создаю новое поле ввода, автозаполнение не работает. Данные для автозавершения поступают из базы данных MYSQL.

Я надеюсь, что кто-то знает, почему это не работает.

спасибо, что заблаговременно!

Answer 1

При создании нового элемента:

$(add_button).click(function(e) 
{ 
    if(x < max_fields) 
    { 
     x++; 
     $(wrapper).append('<div><input type="text" name="typeahead[]" 
        class="typeahead tt-query" id="' + x + '"> 
        <a href="#" class="remove_field">Remove</a></div>'); //add input box 
    } 
}); 

вам необходимо инициализировать соответствующий объект машинописный. После предыдущих $ (обертка) .append вам нужно добавить:

$('#' + x).typeahead({ 
     name: 'typeahead', 
     remote:'search.php?key=%QUERY', 
     limit : 10 
});