Registar o controlo dinâmico usando jquery para preenchimento automático

Question

Estou criando as caixas de texto dinamicamente usando jQuery em um clique de botão.

<table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <div id="lblCustName">
                </div>
            </td>
            <td>
                <div id="lblRemove">
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="Add" id="AddRow" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="Submit" id="SaveCustomers" />
            </td>
        </tr>
        </table>

     <script type="text/javascript" language="javascript">
        $(document).ready(function() {
           //validate post form
            $("#CustomersForm").validate({ ignore: ":not(:visible)" });
           //Initialize the dynamic id
           _DynId = 1;
           //Click Event for Customers
            $('#AddRow').click(function(e) {
                $('#lblCustName').append('<div id="lblCustName' + _DynId + '" style="height:20px;padding-left:10px;">' + '<input type="text" name="CustName" id="CustName' + _DynId + '" class="required" value="" title="*" />');
                $('#lblRemove').append('<div id="lblRemove' + _DynId + '" style="height:20px;padding-left:10px;">' + '<img src="../../Content/Images/delete_icon.gif" onclick=Remove("' + _DynId + '"); title="Remove" id="iRemove' + _DynId + '"></img>');
                _DynId += 1;
            });
 </script>

Eu estou tentando adicionar a caixa de texto para os clientes de forma dinâmica. Este é o html de exemplo para a funcionalidade de adicionar clientes para um processamento de relatórios, ... Eu preciso dar a opção de preenchimento automático para as caixas de texto.

Eu tenho usado a seguir roteiro para isso:

$.getJSON("/User/GetAllCustomers/?t=" + new Date(), {},
         function(data) {
             if (data != null) {
                 $("input:text[name=CustName]").autocomplete(data, { mustMatch: false, matchContains: 4, max: 50,
                     formatItem: function(row) {
                         if (row.CustomerName!= "") {
                             return row.CustomerName;
                         }
                     },
                     formatResult: function(row) {
                         return row.CustomerName;
                     }
                 }).result(function(e, row) {
                    //do something
                 });
             }
         });

O autocomplete não está funcionando para os controles adicionados dinamicamente.

Eu estou tentando para qualquer possibilidade de registar os controles adicionados dinamicamente para a forma, para que o autocomplete vai funcionar para os controles adicionados dinamicamente

Answer 1

O problema é que quando você ligar que autocomplete é obrigatório para os campos que correspondem ao selector quando a função é executada. Se você adicionar algo mais tarde que também coincide com ele não será automaticamente bind.

Para os eventos básicos jQuery há um vivo ligação que permite que você faça isso automaticamente , mas autocomplete não vai funcionar por isso - basicamente, sua única opção é ligar uma nova auto-completar cada vez que você adicionar um novo campo de texto

EG: Adicionar para a função AddRow:

$("#lblCustName" + _DynId + " input[name=CustName]").autocomplete(...);

(Obviamente substituindo ... com os parâmetros desejados)

Você provavelmente vai querer colocar o seu objeto de dados que você se afastou do webservice em uma variável global para apoiar isso, e provavelmente o mesmo com as opções de preenchimento automático (apenas para a duplicação de código para evitar).