Enregistrer le contrôle dynamique à l'aide de jquery pour la saisie semi-automatique

Question

Je crée les zones de texte de manière dynamique en utilisant jQuery sur un clic de bouton.

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

J'essaie d'ajouter la zone de texte pour les clients de manière dynamique. Ceci est l'exemple HTML pour la fonctionnalité permettant d'ajouter des clients pour le traitement d'un rapport, ... Je dois donner l'option autocomplete pour les champs de texte.

J'ai utilisé le script ci-dessous pour cela:

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

L'auto-complétion ne fonctionne pas pour les contrôles ajoutés dynamiquement.

J'essaie toute possibilité d'enregistrer les contrôles ajoutés dynamiquement au formulaire afin que l'auto-complétion fonctionne pour les contrôles ajoutés dynamiquement

Answer 1

Le problème est que lorsque vous liez cette autocomplétion, elle est liée aux champs qui correspondent au sélecteur lors de l'exécution de la fonction. Si vous ajoutez ultérieurement un élément correspondant, il ne sera pas automatiquement lié.

Pour les événements jQuery de base, une liaison Live vous permet de le faire automatiquement, mais en complétant automatiquement. cela ne fonctionnera pas. En gros, votre seul choix est de lier une nouvelle saisie automatique chaque fois que vous ajoutez un nouveau champ de texte

EG: Ajouter à la fonction AddRow:

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

(Évidemment en remplaçant ... par les paramètres souhaités)

Vous voudrez probablement placer l'objet de données que vous avez extrait du service Web dans une variable globale pour prendre en charge cette opération, et probablement la même chose avec les options de saisie semi-automatique (juste pour éviter la duplication de code).