Registra il controllo dinamico usando jquery per il completamento automatico

Question

Sto creando dinamicamente le caselle di testo usando jquery con un clic sul pulsante.

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

Sto cercando di aggiungere dinamicamente la casella di testo per i clienti. Questo è il codice HTML di esempio per la funzionalità di aggiunta di clienti per l'elaborazione di un report, ... Devo dare l'opzione di completamento automatico per le caselle di testo.

Per questo ho usato lo script seguente:

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

Il completamento automatico non funziona per i controlli aggiunti dinamicamente.

Sto cercando qualsiasi possibilità di registrare i controlli aggiunti dinamicamente al modulo, in modo che il completamento automatico funzionerà per i controlli aggiunti dinamicamente

Answer 1

Il problema è che quando si associa il completamento automatico è vincolante per i campi che corrispondono al selettore quando viene eseguita la funzione. Se aggiungi qualcosa in seguito che corrisponde anche non si vincolerà automaticamente.

Per gli eventi jQuery di base c'è un Live che ti consente di farlo automaticamente, ma il completamento automatico non funzionerà in questo modo: in pratica la tua unica scelta è quella di associare un nuovo completamento automatico ogni volta che aggiungi un nuovo campo di testo

EG: aggiungi alla funzione AddRow:

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

(Ovviamente sostituendo ... con i parametri desiderati)

Probabilmente vorrai mettere l'oggetto dati che hai ritirato dal servizio web in una variabile globale per supportare questo, e probabilmente lo stesso con le opzioni di completamento automatico (solo per evitare la duplicazione del codice).