Autocomplete et jqgrid

Version imprimable

2 pièce(s) jointe(s)

Salutation tout le monde!!

Voila j'essaie d'utiliser le plug in autocomplete au sein du plug in jqgrid et je me heurte à quelques problèmes. Lorsque je saisie des lettres dans mon champ utilisateur, les données sont effectivement envoyées à mon script php et celui-ci me retourne les résultats correspondant à la recherche sous format json. Mais le problème c'est que lorsque que je saisie les 1e lettres, la liste déroulante se déploie et est vide alors que j'ai des résultats. D'ailleurs j'ai fait le test lorsque je saisie les lettre "fe" j'ai 5 résultats en json et dans la liste déroulante lorsque je passe la sourie j'ai 5 trucs en surbrillance mais les résultats ne sont pas affiché dans la liste pour que je puisse en sélectionner 1. J'ai mis une image pour que vous puissiez voir le problème:
Pièce jointe 203225

Voici mon code javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{name:'UTILISATEUR_ID_UTILISATEUR', index:'UTILISATEUR_ID_UTILISATEUR',
                    width:200,//17
                    height:20,
                    sortable:true,
                    editable:true,
                   // stype:"select",
                    classes: "clickable",
                    edittype: "text",
                    editoptions:{size:30,ajaxSelectOptions: {type: "POST",datatype:"json"}, dataInit: function(elem) //, dataUrl:'utilisateurs/select'
                                            {                               
                                             $(elem).autocomplete({
 
                                                source: function(request, response){
                                                $.get("utilisateurs/select", {
                                                    term:request.term
                                                    }, function(data){
                                                    response($.map(data, function(item) {
                                                        return {
                                                            label: item.NOM_UTILISATEUR,
                                                            value: item.ID_UTILISATEUR
                                                        }
                                                    }))
                                                }, "json");
                                            },
                                            minLength: 2,
                                            dataType: "json",
                                            cache: false
                                             });
 
                        }} //créer un select dans le formulaire
                },

Voila quelqu'un pourrait il m'aider ? Car j'en ai vraiment besoin et je bloque depuis un moment dessus :(. Merci d'avance à celui qui pourra éclairer ma lanterne :). Et si vous avez besoin de plus de précision je suis la :).

EDIT :
J'ai résolu mon problème au final!! Et j'étais pas loin de la solution !! voici le code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{name:'UTILISATEUR_ID_UTILISATEUR', index:'UTILISATEUR_ID_UTILISATEUR',
                    width:200,//17
                    height:20,
                    sortable:true,
                    editable:true,
                   // stype:"select",
                    classes: "clickable",
                    edittype: "text",
                    editoptions:{size:30,ajaxSelectOptions: {type: "POST",datatype:"json"}, dataInit: function(elem) //, dataUrl:'utilisateurs/select'
                                            {                                 
                                             $(elem).autocomplete({
                                                source: function(request, response){
                                                $.get("utilisateurs/select", {
                                                    term:request.term
                                                    }, function(data){
                                                    response($.map(data, function(item,id) { 
                                                        return {
                                                            label: item,
                                                            value: id
                                                        }
                                                    }))
                                                }, "json");
                                            },
                                            minLength: 2,
                                            dataType: "json",
                                            search: "",
                                            cache: false
                                             });
 
                        }} //créer un select dans le formulaire
                },

Donc maintenant j'ai la liste déroulante qui contient mes noms d'utilisateurs et lorsque j'en sélectionne un j'ai son id mais j'ai de nouveau un problème, lorsque j'ai sélectionné un utilisateur j'ai que son id qui est mis dans l'input voici l'image qui le montre:

Pièce jointe 203246

En faites se que je souhaite c'est d'avoir le nom de l'utilisateur d'affiché mais je renvoi son id comme pour mon problème précédent. Et donc comment peut on faire ? Enfin si cela est possible. Svp je sens que je suis proche de finir donc si quelqu'un peut m'aider ça serai vraiment super! :)

10/03/2016, 19h48
mathieu

regarder l'exemple de code ici :
http://jqueryui.com/autocomplete/#custom-data

ce sont les paramètres "focus" et "select" qui modifient le libellé en mettant le texte à la place de l'identifiant
11/03/2016, 09h49
Arendelle

Merci de ta réponse !! Elle est très intéressante et m'a été très utile pour comprendre un peu mieux le système autocomplete de jquery. Malheureusement ça ne fait ce que je souhaite. Car en faisant quelques tests j'ai remarqué que lorsque je suis dans la liste déroulante pour sélectionner un utilisateur, l'input affiche bien le nom de l'utilisateur, mais une fois sélectionné c'est l'id qui s'affiche dans l'input et non le nom de l'utilisateur. Alors que je veux seulement le nom de l'utilisateur d'afficher dans l'input, mais que le serveur récupère son id. Mais avec un seul input je crois que c'est impossible. Sauf si quelqu'un a trouvé une solution dans ce cas je suis preneur :). En faites c'est le paramètre select qui met la valeur finale dans l'input et c'est celle-ci qui sera envoyé au serveur. Alors que le focus ne montre que la valeur que l'on a lorsque l'on passe la souris sur un élément de la liste déroulante. Encore merci pour ta réponse, si quelqu'un a trouvé une solution je suis preneur, je continue de chercher de mon côté :).
11/03/2016, 23h53
mathieu
dans ce cas, tu peux essayer la chose suivante :
- ajouter un champ caché "idUtilisateur"
- au moment de modifier le libellé du menu déroulant, stocker en même temps l'identifiant dans ce champ caché
21/10/2016, 11h51
Arendelle

Hello mathieu !!

Désolé j'avais un peu oublié de répondre mais j'ai finalement décidé de garder le nom de l'utilisateur et côté serveur j'ai une requête pour obtenir son id c'est la meilleures solution celon moi. En tout cas merci pour ton aide ça m'a vraiment été utile !! Encore merci !!