UI Autocomplete : des résultats étranges!

**Soobook** · 15/07/2010, 09h37

Bonjour à tous.

J'utilise autocomplete (la version standart, pas un mod) et ça marche plutôt bien. J'ai juste un soucis :

Lorsque je tape le nombre de lettres nécessaires pour l'exécution du script (minChars), des résultats s'affichent, mais sans êtres filtrés :

Ensuite c'est bon :

J'ai pas mal cherché et testé les différents paramètres, mais c'est toujours pareil.

Je suppose qu'à la première étape, les données sont juste rapatriées et affichées par ordre alphabétique, et que le filtrage ne se fait qu'aux saisies suivantes, mais du coup comment modifier ça (j'suis pas encore très fort en js, moi,

)?

Voici mon code, si quelqu'un a une idée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
//JAVASCRIPT.
$(document).ready(function(){
    $("#chPat").autocomplete("affliste.php", {
        minChars: 1,
        matchSubset: true,
        matchContains: true
    });
});
 
//HTML.
<div id="icones">
    <label for="chPat" id="labchPat">Rechercher un patient :</label>
    <input type="text" id="chPat" name="chPat"/>
</div>
 
//AFFLISTE.PHP
$req = "select id, concat(right(concat('000', id), 3), ' - ', ucase(nom), ' ', ucase(prenom)) as identite from patients order by nom, prenom";
$query = $db->query($req);
if($db->error){
    echo "ERROR: There was a problem with the query.\n\n$req\n\n".$db->error;                            
}
else {
    while ($result = $query ->fetch_object()){
        echo $result->identite."|".$result->id."\n";
    }
}

Merci par avance...

PS : une petite question subsidiaire qui n'a rien à voir (ni à faire dans ce forum

).
Vous savez pourquoi ma requête SQL ci-dessus fonctionne, alors que si je fais ça, le ucase ne s'appliqe pas? Bizarre, non?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

select id, ucase(concat(right(concat('000', id), 3), ' - ', nom, ' ', prenom)) as identite from patients order by nom, prenom

**danielhagnoul** · 16/07/2010, 01h48

Bonsoir.

minChars ?

La référence est http://jqueryui.com/demos/autocomple...tion-minLength

**Soobook** · 16/07/2010, 06h13

Dans le plugin autocomplete c'est bien minChars!!!

Mais bon, débutant dans le domaine, je connais pas encore très bien et je savais pas que UI permettait de faire ces choses là.
En plus ça a l'air super simple, du coup je vais essayer ça...

Merci danielhagnoul...

(Je mets pas encore résolu, au cas où...)

**Soobook** · 28/07/2010, 06h57

Bonjour,

UI se révèle un outil génial, pour autocomplete, mais également pour des tonnes d'autres choses....

Mais j'ai encore un petit soucis : mon autocomplete fonctionne, c'est un niveau de la close select que ça déconne.
Mes données contiennent deux champs : libelle et id).
La recherche se fait sur libelle, et le select doit me renvoyer l'id. C'est là que ça coince : j'arrive à renvoyer le libelle mais pas l'id.

Voici mon code Javascript, j'ai rajouté des commentaires dedans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
            $(function(){  
                $("#tags").autocomplete({  
                    minLength: 2,
                    source: function(req, add){  
                        $.getJSON("rechercheRpc.php?callback=?", req, function(data) {  
                            var suggestions = [];  
                            $.each(data, function(i, val){  
                                suggestions.push(val.libelle);  
                                //Jusque là pas de soucis : je peux utiliser mon id via val.id
                            });  
                            add(suggestions);  
                        });  
                    },  
 
                    select: function(e, ui) {  
                        //C'est ici que ça va plus : je peux récupérer mon libelle via ui.label, mais l'id je trouve pas.
                    },  
                    change: function() {  
                        $("#tags").val("").css("top", 2);  
                    }   
                });  
            });

Je peux contourner le truc avec des artifices (genre champs cachés...) mais je suppose que ça doit être possible de faire ça directement. J'ai essayé d'adapter les différents exemples sur le site de JQuery UI, notamment "Custom Data and Display", mais sans succès...

Voila, si quelqun peut m'aider, ce serait super...
Merci d'avance.

**danielhagnoul** · 28/07/2010, 11h19

Bonjour.

Et avec ui.item.label et ui.item.id ?

**Soobook** · 28/07/2010, 11h46

C'est bien la mon problème, en fait : ui.item.value me renvoie ma chaine de charactère, mais ui.item.id me renvoie "undefined".
Ce que je ne comprends pas, c'est à quel moment et comment sont alimentées ces valeurs. Je suppose que c'est à ce niveau là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
 $.each(data, function(i, val){  
       suggestions.push(val.libelle);  
});

J'ai essayé de mettre dans le push un tableau avec les deux valeurs, mais ça marche pas...

**danielhagnoul** · 28/07/2010, 22h31

Bonsoir

On ne parle peut être pas de la même chose, les ui.item.NomAttribut c'est pour la gestion du contenu de l'autocomplete, voir le code de l'exemple http://jqueryui.com/demos/autocomplete/#custom-data

Pour faciliter la compréhension du problème, il serait bon de donner le code CSS, HTML, JS de votre autocomplete, en le limitant à l'indispensable.

**Soobook** · 29/07/2010, 06h12

Bonjour et merci pour votre aide.

Plus bas mon code.

Concernant le lien que vous m'avez envoyé, je me suis déjà très longuement acharné dessus et je n'arrive pas à le faire fonctionner, du coup je me suis orientés vers la solution ci-dessous.

Je mets au cas où le php de la source de données, mais à priori pas de pb à ce niveau là.
Niveau CSS, pour l'instant j'utilise tel quel le thème officiel JQuery, les seules chose que j'y ai modifié sont les font-family...

recherchRpc.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
    $param = $_GET["term"];
    $req = "select libelle, id from patients where ucase(libelle) like ucase('%$param%') order by nom, prenom limit 0, 10";
    $query = $db->query($req);
 
    $tmp = array();
    while ($result = $query ->fetch_object()){
        $tmp[] = array("libelle" => $result->libelle, "id" => $result->id);
    }
    echo $_GET["callback"] . "(" . json_encode($tmp) . ")";

Code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
        <div class="demo">
            <div class="ui-widget">
                <label for="tags">Rechercher un patient : </label>
                <input id="tags" />
            </div>
        </div>

Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
            $(function(){  
                $("#tags").autocomplete({  
                    minLength: 2,
                    source: function(req, add){  
                        $.getJSON("rechercheRpc.php?callback=?", req, function(data) {  
                            var suggestions = [];  
                            $.each(data, function(i, val){  
                                suggestions.push(val.libelle);  
                            });  
                            add(suggestions);  
                        });  
                    },  
                    select: function(e, ui) {  
                        alert(ui.item.label + ' - ' + ui.item.id);
                        //ui.item.value me renvoie la valeur de val.libelle, et ui.item.id me renvoie undefined.
                    },  
                    change: function() {  
                        $("#tags").val("").css("top", 2);  
                    }   
                });  
            });

**Soobook** · 29/07/2010, 09h02

J'ai enfin réussi à faire fonctionner mon script.
Par rapport à ce que j'ai posté précédemment, il faut évidemment ajouter aux résultats tous les champs souhaités (au niveau du suggestions.push()).

Si j'ai bien compris, mon problème venait du fait que lorsque la liste de suggestions est créée à partir du tableau de résultats, elle affiche les résultats tels quels :
TABLEAU[0]
TABLEAU[1]
...

Sauf que dans mon cas chaque champs du tableau contient un tableau. D'où les undefined affichés dans la liste de suggestion.
Il faut donc retoucher celle-ci afin d'afficher les données souhaitées.

Je laisse ci-dessous le code final, si ça peut aider quelqun...

Merci encore à danielhagnoul pour son aide.

SOURCE DES DONNEES : rechercheRpc.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
    $param = $_GET["term"];
    $req = "select libelle, id from patients where ucase(libelle) like ucase('%$param%') order by libelle limit 0, 10";
    $query = $db->query($req);
    $tmp = array();
    while ($result = $query ->fetch_object()){
        $tmp[] = array("libelle" => $result->libelle, "id" => $result->id);
    }
    echo $_GET["callback"] . "(" . json_encode($tmp) . ")";

Voici ce que me renvoie ma page php lorsque je tape "ben" dans mon champ:

Code : Sélectionner tout - Visualiser dans une fenêtre à part

jsonp1280384612055([{"libelle":"NOUVEAU PATIENT","id":0},{"libelle":"015 - BENJAMIN Jean F\u00e9lix","id":"15"},{"libelle":"063 - GAZE Benjamin","id":"63"},{"libelle":"278 - LALY Benjamin","id":"278"},{"libelle":"171 - SERY Benjamin","id":"171"}])

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    <div class="ui-widget">
        <label for="tags">Rechercher un patient : </label>
        <input id="tags" />
    </div>

JAVASCRIPT

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
    $(function(){  
        $("#tags").autocomplete({  
            minLength: 2,
            source: function(req, add){  
                $.getJSON("rechercheRpc.php?callback=?", req, function(data) {  
                    var suggestions = [];
                    $.each(data, function(i, val){
                        //Définir ici les champs que l'on souhaite utiliser.
                        suggestions.push({"id": val.id, "libelle": val.libelle});  
                    });  
                    add(suggestions);  
                });  
            },  
            select: function(e, ui) {  
                alert(ui.item.id);
            },  
            change: function() {  
                $("#tags").val("").css("top", 2);  
            }   
            // "Retoucher" la liste de suggestions.
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
            .data( "item.autocomplete", item )
            // On choisi ici ce que contiendront les élément de la liste de suggestions.
            .append( "<a>" + item.libelle + "</a>" )
            .appendTo( ul );
        };  
    });

**danielhagnoul** · 29/07/2010, 09h04

Bonjour

Nous sommes un sous-forum JavaScript, je ne peux rien faire avec recherchRpc.php !

Ce qui m'intéresse c'est uniquement le code généré par recherchRpc.php !

[Edit] Votre

à dû croiser mon message, mais il serait tout de même intéressant pour les forumeurs qui nous liront, et pour moi, d'avoir un extrait du code généré.

**Soobook** · 29/07/2010, 09h23

Effectivement! J'édite mon précédent message pour rajouter un extrait des données renvoyées.
Et je me flagelle un coup au passage : j'ai lu assez de forums sur JQuery et Javascript pour savoir que le php n'y est pas très utile...

En fait je le joins surtout parce que j'ai eu du mal à comprendre comment utiliser JSON, je me dis que dit que ça pourra en aider certains...

**danielhagnoul** · 29/07/2010, 09h39

Merci.

Cela rejoint, mais en le construisant avec JSON, le code de l'exemple que je citais, http://jqueryui.com/demos/autocomplete/#remote-jsonp :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$(function() {
	var projects = [
		{
			value: 'jquery',
			label: 'jQuery',
			desc: 'the write less, do more, JavaScript library',
			icon: 'jquery_32x32.png'
		},
		{
			value: 'jquery-ui',
			label: 'jQuery UI',
			desc: 'the official user interface library for jQuery',
			icon: 'jqueryui_32x32.png'
		},
		{
			value: 'sizzlejs',
			label: 'Sizzle JS',
			desc: 'a pure-JavaScript CSS selector engine',
			icon: 'sizzlejs_32x32.png'
		}
	];
 
	$('#project').autocomplete({
		minLength: 0,
		source: projects,
		focus: function(event, ui) {
			$('#project').val(ui.item.label);
			return false;
		},
		select: function(event, ui) {
			$('#project').val(ui.item.label);
			$('#project-id').val(ui.item.value);
			$('#project-description').html(ui.item.desc);
			$('#project-icon').attr('src', '../images/' + ui.item.icon);
 
			return false;
		}
	})
	.data( "autocomplete" )._renderItem = function( ul, item ) {
		return $( "<li></li>" )
			.data( "item.autocomplete", item )
			.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
			.appendTo( ul );
	};
});

Il y a également un exemple avec JSONP.

**l.laurent60** · 16/08/2010, 18h57

Bonjour,
Je ne pose une question concernant l'API Autocomplete, si la version de PHP et inférieur a 5.2 il faut utilisé la class zend encoder mais si l'on n'utilise pas Zend Framwork il n'y a pas d'autre solution ?
Car la CLASS zend encoder fais une include de Zend exception du faire problablement une incluse de ...
Merci par avance

UI Autocomplete : des résultats étranges!

jQuery

Discussions similaires

Partager

Partager