Dynamic-Mess.com


"The world is a dynamic mess of jiggling things..."

Exemple d'autocomplétion simple avec jQuery

Article posté le 18-05-2017 dans la catégorie JavaScript, JQuery...

   Voici un exemple simple d'auto-complétion avec jQuery:

$(window).load(function()
    {
        $( "[name='codepostal']" ).autocomplete({ // Nom du champ écouté
            minLength: 4, // se déclenche à partir de 4 caractères saisis
            source : function(request, response){
                $.ajax({
                    url : urlDuSite + 'codepostal/codepostal/codeliste', // Url founissant la réponse json
                    dataType : 'json',
                    data : {
                        zip : $( "[name='codepostal']" ).val() // Donnée à lui fournir (champ écouté)
                    },
                    success: function (json) { // Traitement de la réponse pour afficher la liste de choix
                        response($.map(json, function (item) {
                            item.label = item.codepostal + " " + item.ville;
                            item.value = item.codepostal;
                            
                            return item;
                        }));
                    }
                });
            },
            select: function(event, ui) { // Evènement quand l'utilisateur sélectionne un choix
                $( "[name='ville']" ).val(ui.item.ville);
            }
        });
    });

 

 


Tweet
comments powered by Disqus