Registre el control dinámico usando jquery para autocompletar

Question

Estoy creando los cuadros de texto dinámicamente usando jquery con un clic de botón.

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

Estoy intentando agregar dinámicamente el cuadro de texto para clientes. Este es el html de muestra para la funcionalidad de agregar clientes para el procesamiento de un informe, ... Necesito dar la opción de autocompletar para los cuadros de texto.

He usado el siguiente script para eso:

$.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
                 });
             }
         });

El autocompletado no funciona para los controles agregados dinámicamente.

Estoy intentando cualquier posibilidad de registrar los controles agregados dinámicamente al formulario, para que el autocompletado funcione para los controles agregados dinámicamente

Answer 1

El problema es que cuando vincula ese autocompletado, se vincula a los campos que coinciden con el selector cuando se ejecuta la función. Si agrega algo más tarde que también coincide, no se vinculará automáticamente.

Para eventos básicos de jQuery hay un enlace Live que le permite hacer esto automáticamente, pero autocompletar no funcionará con esto: básicamente, su única opción es vincular un nuevo autocompletado cada vez que agrega un nuevo campo de texto

EG: Agregar a la función AddRow:

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

(Obviamente reemplazando ... con los parámetros que desee)

Es probable que desee colocar su objeto de datos que retiró del servicio web en una variable global para admitir esto, y probablemente lo mismo con las opciones de autocompletar (solo para evitar la duplicación de código).