使用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--; 
         }) 
        }); 

我可以通過點擊創建新的輸入字段 「添加更多領域」 鏈接。 我現有的2個文本字段的自動完成是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 
});