jquery autocomplete, 자동완성 동적 생성 > jquery

출처 : http://jsfiddle.net/r08m8vvy/4/

http://stackoverflow.com/questions/26498602/enabling-jquery-autocomplete-on-dynamically-created-input-fields

<div class="input_fields_wrap">

    <button class="add_field_button">Add More Fields</button>

    <div><input type="text" name="mytext[]"></div>

</div>

<script type="text/javascript">

<!--

$(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

    var availableAttributes = [

 "account_address",

 "account_address_city",

 "account_address_country",

 "account_address_state",

 "account_address_street1",

 "account_address_street2",

 "account_address_zip",

 "account_email",

 "account_login",

 "account_name",

 "account_number",

 "account_telephone"

    ];

    $(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('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); 

            $(wrapper).find('input[type=text]:last').autocomplete({

                source: availableAttributes

            });

            //add input box

        }

    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text

        e.preventDefault(); $(this).parent('div').remove(); x--;

    })

    $("input[name^='mytext']").autocomplete({

source: availableAttributes

});

});

// autocomplete enablement

//-->

</script>