Discussion :

[anonyhm]

Bonjour,

J'ai un champ texte représentant des personnes et je souhaite que lorsqu'un utilisateur entre des caractères dans ce champ, il lui soit proposé la liste des personnes existant en base.

J'utilise le framework Struts 2 et le widget autocomplete de la librairie Jquery 10.

Actuellement, je récupère bien le nom des personnes de la base de données (je le vérifie avec un "alert(..)" dans mon javascript) mais rien ne s'affiche comme suggestions.

Voici mon input dans la jsp :

Code :

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

<s:textfield id="personnes" name="personnes"/>

Voici ma jsp représentant la liste des personnes trouvées en base :

Code :

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

1
2
3
4
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:iterator  value="listePersonnes">
 <s:property  value="id" /> | <s:property  value="nom" />
</s:iterator>

Voici mon code 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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
$('#personnes').autocomplete({
    	minLength : 2, 
    	source : function(request, response){
    	$.ajax({
    		url : "rechercherPersonnes.do",
    		data : request,
    		type : 'GET',
 
    		success: function(data) {
    			data = parse(data);
                response($.map(data, function(item) {
                alert("item.nom = " + item.nom + ", item.id" + item.id);
                return {
                    label: item.nom,
                    value: item.id
                    };
            }));
    		},
 
    		error : function(data) {
				alert('ERROR' + data);
			}
    		});
    	}
    });
 
    function parse(data) {
		var parsed = [];
		var rows = data.split("\n");
		for (var i=0; i < rows.length; i++) {
			var row = $.trim(rows[i]);
			if (row) {
				row = row.split("|");
				parsed[parsed.length] = {
					id: row[0],
					nom : row[1]
				};
			}
		}
		return parsed;
	};

Quelqu'un aurait-il une piste svp?

[NoSmoking]

Bonjour,

...mais rien ne s'affiche comme suggestions.

d'un autre coté tu ne fais rien avec les données si ce n'est un return qui ce perd.
Un classique AJAX : utiliser les données au bon moment !


Cet article devrait te passionner :
Ajax - une autocomplétion pas à pas

[anonyhm]

Merci pour ces tutos! Il est vrai que je suis débutante en AJAX.

Pour mon cas, les fonctions JQuery du widget de l'autocomplete s'occupent de récupérer les données envoyées par le serveur et sont sensées les afficher.
Je ne pense pas vouloir utiliser les données avant de les avoir reçues.
Je me trompe?

[danielhagnoul]

Bonjour

Prenez exemple sur le code de cette démonstration.

Cette instruction, data = parse(data);, n'a pas lieu d'être, car "data" doit obligatoirement avec une structure précise [ { "label" : "Choice1", "value" : "value1" }, ... ].

[anonyhm]

J'ai créé une fonction parse() car dans mon action Struts, je voulais que ma méthode renvoie seulement une liste de Personnes.

Code java :

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
public String rechercherPersonnesParNom() throws Exception {
	// récupération du nom entré
	String qUTF8 = "";
	if (null != term) {
		try {
			qUTF8 = new String(term.getBytes(), "UTF8");
		} catch (UnsupportedEncodingException e) {
			logCommun.error(e.getMessage(), e);
		}
	} 
	List<Personnes> listePersonnes = new ArrayList<Personnes>();
	try {
		listeNoms= this.personnesService
			.rechercherPersonnesParNom(qUTF8 );
		setListePersonnesParNom(listeNoms);
	} catch (Exception e) {
		//TODO
	} 
	return SUCCESS;
}

La réponse renvoyée par ma requête est de la forme :
100 | Dupond Jacques
101 | Durand Jean
...

Le souci est que ma fonction parse ne retourne pas la bonne structure.

Si je modifie ma méthode java dans mon Action en y construisant une réponse JSON avec la bonne structure :

Code java :

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
public String rechercherPersonnesParNom() throws Exception {
	// récupération du nom entré
	String qUTF8 = "";
	if (null != term) {
		try {
			qUTF8 = new String(term.getBytes(), "UTF8");
		} catch (UnsupportedEncodingException e) {
			logCommun.error(e.getMessage(), e);
		}
	} 
	List<Personnes> listePersonnes = new ArrayList<Personnes>();
	try {
		listePersonnes = this.personnesService
			.rechercherPersonnesParNom(qUTF8 );
		//setListePersonnesParNom(listeNoms);
                String responseJson = "[";
		for (Personnes personnes : listePersonnes ) {
			if (!responseJson.equals("[")) {
				responseJson += ",";
			}
		responseJson += "{\"label\":\"" + personnes.getNom() + "\",\"value\":\"" + personnes.getId() + "\"}";
		}
		if (!listePersonnes .isEmpty()) {
			responseJson.substring(0, responseJson.length() - 1);
		}
		responseJson += "]";
		Writer writer = response.getWriter();
		writer.write(responseJson);
		response.setStatus(HttpServletResponse.SC_OK);
		response.setContentType("application/json; charset=utf-8");
	} catch (Exception e) {
		//TODO
	} catch (IOException e) {
		log.error("Erreur d'autocomplétion" + e);
		throw new Exception("Erreur d'autocomplétion");
	}
	return SUCCESS;
}

et que je modifie mon javascript comme suit :

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
 
$('#personnes').autocomplete({
    	minLength : 3, 
    	source : function(request, response){
    	$.ajax({
    		url : "rechercherPersonnes.do",
    		contentType: "application/json; charset=utf-8",
    		dataType : "json",
                data: request,
    		type : 'GET',
 
    		success: function(data) {
    			response(data);
        },
	    	error : function(data) {
				alert('ERROR' + data);
			}
    		});
    	}

La réponse reçue est au format correct mais la liste de suggestions ne s'affiche pas. Dans la console javascript de mon navigateur, une erreur me dit
"Erreur de syntaxe" sur la réponse.
Mais si je copie cette réponse dans une liste et que je fais un autocomplete ayant pour source cette liste cela fonctionne.

[NoSmoking]

Dans la console javascript de mon navigateur, une erreur me dit
"Erreur de syntaxe" sur la réponse.

le Json retourné est-il conforme?