オートコンプリートがダイナミックに追加されていないtextBox

Question

jqueryで動的にテキストボックスを作成するコードが見つかりました。また、javascriptでテキストボックスにオートコンプリートを実装しています。

しかし、それらを一緒にマージすることは私にとっては問題です。最初のテキストボックスが正常にオートコンプリートを実装している..しかしautocomplete..hereを実装していない追加ボタンにより、新しい動的に作成されたテキストボックスは、私のコードです

<script type="text/javascript"> 
    $(function() { 
     var availableTags = [ 
    "ActionScript", 
    "AppleScript", 
    "Asp", 
    "BASIC", 
    "C", 
    "C++", 
    "Clojure", 
    "COBOL", 
    "ColdFusion", 
    "Erlang", 
    "Fortran", 
    "Groovy", 
    "Haskell", 
    "Java", 
    "JavaScript", 
    "Lisp", 
    "Perl", 
    "PHP", 
    "Python", 
    "Ruby", 
    "Scala", 
    "Scheme" 
]; 
     $(".insti_name").autocomplete({ 
      source: availableTags, 
      autoFocus:true 
     }); 
    }); 
    $(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 = 1; //initlal text box count 
$(add_button).click(function(e){ //on add input button click 
    e.preventDefault(); 
    if(x < max_fields){ //max input box allowed 
     x++; //text box increment 
     $(wrapper).append('<br><div><input class="insti_name" type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
    } 
}); 

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
    e.preventDefault(); $(this).parent('div').remove(); x--; 
}) 
}); 
    </script> 

    <br><br> 

<div class="input_fields_wrap"> 
    <button type="button" class="btn btn-primary btn-lg add_field_button " > 
    ADD INSTITUTIONS</button><br> 
<div style="margin-top:11px"><input class="insti_name" type="text" 
    name="mytext[]"></div> 
    </div> 

Answer 1

あなたが外を見ている動的な挙動をサポートしていませんオートコンプリートウィジェットAPI

$(add_button).click(function(e){ //on add input button click 
    e.preventDefault(); 
    if(x < max_fields){ //max input box allowed 
     x++; //text box increment 

     // first destroy the previously setup auto-complete 
     $(".insti_name").autocomplete("destroy"); 

     // append your new html element 
     $(wrapper).append('<br><div><input class="insti_name" type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 

     // setup autocomplete again 
     // you can move this call and the one above (the one you have set earlier) in one function for better maintainability 
     $(".insti_name").autocomplete({ 
      source: availableTags, 
      autoFocus:true 
     }); 
    } 
}); 

これは、次のコードを使用して同じことを達成できます。それが役に立てば幸い！