autocomplete+SweetAlert

Klayhan
Javascript

Bonjour,

Je voudrais pouvoir interagir avec des champs <input> affichés dans une div affichée par SweetAltert2, notamment appliquer la fonction JqueryUI autocomplete, et contrôler les champs lorsque l'on change d'input (la fonction PreConfirm de SweetAlert ne permet de contrôler que lorsque l'on clique sur le bouton confirmer
Voici un screen de la fenêtre, pour vous donner une idée :

Voici le code des appels à JqueryUI.autocomplete et SweetAlert2

//SweetAlert
editForm =  
                    '<input type = text autofocus id = "fname" class = "cells cells1" placeholder = "Auteur" value = "' + $('.selected .name').text() + '">' +
                    '<input type = text id = "ftitle" class = "cells" placeholder = "Titre" value = "' + $('.selected .title').text() + '">' +
                    '<input type = text id = "ftype" class = "cells cells1" placeholder = "Type" value = "' + $('.selected .type').text() + '">' +
                    '<input type = text id = "fgenre" class = "cells cells1" placeholder = "Genre" value = "' + $('.selected .genre').text() + '">' +
                    '<input type = text id = "frank" class = "cells" placeholder = "Tome" value = "' + $('.selected .rank').text() + '">' +
                    '<input type = text id = "fowned" class = "cells cells1" placeholder = "Possédé" value = "' + $('.selected .owned').text() + '">';
        swal ({
        title : 'Édition d\'un livre',
        type : 'info',
        html : editForm,
        width : '60%',
        background : 'url(img/formBack.jpg) no-repeat',
        customClass : 'formModal',
        confirmButtonText : 'Terminé !',
        confirmButtonClass : 'confirmButt',
        showCancelButton : true,
        cancelButtonText : 'Annuler',
        cancelButtonColor : "#f34200",
        cancelButtonClass : 'cancelButt',
        allowOutsideClick : false
        });

 //autocomplete
 $('.cells1').focus(function(){ //cells1 correspond aux champs où l'on veut appliquer autocomplete
        var $self = $(this);
        params = {
            f : $self.attr('id')        //on récupère l'id du champ
        };
        $.ajax({
            url : 'autocomplete.php', // pour l'envoyer vers un fichier php en ajax, qui renvoie le tableau en fonction de l'id
            data : params,
            type : 'GET',
            dataType : 'json',
            success : function(data) {
                $self.autocomplete({ //on applique autocomplete
                autofocus: true,
                minLength: 0,
                source: data // grâce tableau renvoyé par le fichier php
                });
            $self.autocomplete("search");
        },
        error : function(request, error) {
        }
    })
    });

Peut-être m'y suis-je mal pris, ou est-ce simplement pas possible de cette manière mais je n'ai pas réussi à inclure autocomplete dans ma fenêtre SweetAlert

2 réponses

Klayhan
Auteur
Réponse acceptée

Bonjour

Nope, cela permet d'afficher les propositions même si l'utilisateur n'a encore rien tapé ^^
http://api.jqueryui.com/autocomplete/#method-search

EDIT : Voici le code
l'autocomplete fonctionne, mais la liste n'apparaît pas :
EDIT2 : la liste s'affichait, bien qu'uniquement pour le dernier champs auquel il était appliqué (fowned). Le z-index de la liste était trop bas. Reste à trouver comment appliquer autocomplete à tous les champs

editForm =  '<input type = text autofocus id = "fname" class = "cells cells1" autocomplete="off" placeholder = "Auteur" value = "' + $('.selected .name').text() + '">' +
                                '<input type = text id = "ftitle" class = "cells" autocomplete="off" placeholder = "Titre" value = "' + $('.selected .title').text() + '">' +
                                '<input type = text id = "ftype" class = "cells cells1" autocomplete="off" placeholder = "Type" value = "' + $('.selected .type').text() + '">' +
                                '<input type = text id = "fgenre" class = "cells cells1" autocomplete="off" placeholder = "Genre" value = "' + $('.selected .genre').text() + '">' +
                                '<input type = text id = "frank" class = "cells" autocomplete="off" placeholder = "Tome" value = "' + $('.selected .rank').text() + '">' +
                                '<input type = text id = "fowned" class = "cells cells1" autocomplete="off" placeholder = "Possédé" value = "' + $('.selected .owned').text() + '">';
        swal ({
        title : 'Édition d\'un livre',
        type : 'info',
        html : editForm,
        width : '60%',
        background : 'url(img/formBack.jpg) no-repeat',
        customClass : 'formModal',
        confirmButtonText : 'Terminé !',
        confirmButtonClass : 'confirmButt',
        showCancelButton : true,
        cancelButtonText : 'Annuler',
        cancelButtonColor : "#f34200",
        cancelButtonClass : 'cancelButt',
        allowOutsideClick : false,
        onOpen :    function () {
            $('.cells1').each(function(){
                $self=$(this);
                params = {
                    f : $self.attr('id')
                };
                $.ajax({
                    url : 'autocomplete.php',
                    data : params,
                    type : 'GET',
                    dataType : 'json',
                    success : function(data) {
                        $self.autocomplete({
                        autofocus: true,
                        minLength: 0,
                        source: data
                        });
                    $self.autocomplete("search");
                    },
                    error : function(request, error) {
                    }
                })//ajax
            })//eachCells1
        }//onOpenFunction
        })
saibe

hello,
commence par enlever la ligne 

$self.autocomplete("search"); ???