Autocompletion avec Jquery [Résolu]

Zweet · 23/11/2011, 15h12

Bonjour, pour le boulot on m'a demandé d'intégrer une autocomplétion sur un champ dans une application qui pointe sur une database. Puis qui, quand l'utilisateur clique dessus, affiche la variable sélectionnée juste en dessous.

Pour l'instant j'ai réussi à tout faire (enfin, je crois ...) sauf que je n'arrive pas à récupérer ce que me renvoi ma requête SQL en JSON (je dois avoir plusieurs erreurs dans mon code et comme c'est la première fois que je fais du js

)

Voilà les fichiers que j'ai pour l'instant écrit :

Mon fichier index.php :

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test Autocompletion</title>
 
		<SCRIPT type="text/javascript" src="./lib/js/lib_jq.js" ></SCRIPT>
		<SCRIPT type="text/javascript" src="./lib/js/lib_fct_jq.js" ></SCRIPT>
		<SCRIPT type="text/javascript" src="./lib/js/autocomplete.js"></SCRIPT>
 
	</head>
    <body>
	 <style>
	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
	#city { width: 25em; }
	</style>
 
    <div class="demo">
 
	<div class="ui-widget">
		<label for="city">Groupe : </label>
		<input id="city"/>
 
	</div>
 
	<div class="ui-widget" style="margin-top:2em; font-family:Arial">
		Result:
		<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
	</div>
 
	</div><!-- End demo -->
 
    </body>
</html>

Mon fichier get_group.php :

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
<?php
 
	if (require_once ("connect.php"));
	$search = $_GET['term'];
	if(!$search)
		{
		return;
		}
    $result = mysql_query("SELECT groupe FROM t_groupes WHERE groupe LIKE '".$search."%'  ORDER BY groupe ASC") or die('Problème de connexion au système de gestion de base de données au niveau requête !');
	$rows = array();
    while ($row = mysql_fetch_assoc($result)){
        $rows[] = $row;
 
    }
 
echo json_encode($rows);
 
 
?>

Et voilà pour finir mon fichier autocomplete.js :

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
$(function() {
		function log( message ) {
			$( "<div/>" ).text( message ).prependTo( "#log" );
			$( "#log" ).scrollTop( 0 );
				
		}

		$( "#groupes" ).autocomplete({
			
			source: function(request, response) {
				$.ajax({
					type:"GET",
					url: "get_group.php",
					async: "false",
					dataType: "json",
					data: {
						featureClass: "P",
						style: "full",
						maxRows: 12,
						name_startsWith: request.term						
					},
					//si la fonction réussi
					success: function( data ) {
						A ce niveau là que ça coince je pense !
					}
				});
			},
			minLength: 2,
			select: function( event, ui ) {
				log( ui.item ?
					"Selected: " + ui.item.label :
					"Nothing selected, input was " + this.value);
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
		});
	});

Voici le code source dont je suis parti pour essayer de faire mon bousin :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<meta charset="utf-8">
 
 
 
 
 
 
 
 
	<style>
	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
	#city { width: 25em; }
	</style>
	<script>
	$(function() {
		function log( message ) {
			$( "<div/>" ).text( message ).prependTo( "#log" );
			$( "#log" ).scrollTop( 0 );
		}
 
		$( "#city" ).autocomplete({
			source: function( request, response ) {
				$.ajax({
					url: "http://ws.geonames.org/searchJSON",
					dataType: "jsonp",
					data: {
						featureClass: "P",
						style: "full",
						maxRows: 12,
						name_startsWith: request.term
					},
					success: function( data ) {
						response( $.map( data.geonames, function( item ) {
							return {
								label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
								value: item.name
							}
						}));
					}
				});
			},
			minLength: 2,
			select: function( event, ui ) {
				log( ui.item ?
					"Selected: " + ui.item.label :
					"Nothing selected, input was " + this.value);
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
		});
	});
	</script>
 
 
 
<div class="demo">
 
<div class="ui-widget">
	<label for="city">Your city: </label>
	<input id="city" />
	Powered by <a href="http://geonames.org">geonames.org</a>
</div>
 
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	Result:
	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.</p>
<p>In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.</p>
</div><!-- End demo-description -->

connect.php contient quant à lui mes données de connexion à ma DB (ça ne vient pas de là).

Merci à ceux qui me répondront et sauront m'éclairer.

tidus_6_9_2 · 23/11/2011, 15h26

Il me semble que la requête que tu effectuée ne gère que le JsonP et non le Json. Mais je ne suis pas sûr.

Es-ce que tu arrives déjà à faire une alerte dans

Code :

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

success: function( data ) { alert('x');}

pour voir si tu reçois quelque chose ou non ?

Zweet · 23/11/2011, 15h45

Citation:

Envoyé par tidus_6_9_2

Il me semble que la requête que tu effectuée ne gère que le JsonP et non le Json. Mais je ne suis pas sûr.

Es-ce que tu arrives déjà à faire une alerte dans

Code :

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

success: function( data ) { alert('x');}

pour voir si tu reçois quelque chose ou non ?

Merci de me répondre. Non je ne reçois rien donc il ne passe pas la fonction à true.

Bovino · 23/11/2011, 15h50

Citation:

Et voilà pour finir mon fichier autocompletion.js

Euh... il apparait pas dans ton index.php

Zweet · 23/11/2011, 15h55

Citation:

Envoyé par Bovino

Euh... il apparait pas dans ton index.php

autocomplete.js autant pour moi

Je l'ai modifié dans le post initial que je n'induise plus les gens en erreur.

J'ai changé

Code :

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

1
2
<label for="city">Groupe : </label>
		<input id="city"/>

par

Code :

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

1
2
<label for="groupes">Groupe : </label>
		<input id="groupes"/>

dans l'index.php je pense que ça aidera déjà "un peu".

tidus_6_9_2 · 23/11/2011, 16h05

As-tu essayé de renvoyer une réponse JSonP au lieu de JSon ?

Pour ce faire modifie la ligne suivante:

Code :

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

1
2
 
dataType: "json",

par

Code :

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

1
2
 
dataType: "jsonp",

(pour des infos la dessus tu peux regarder ici au cas ou)

Zweet · 23/11/2011, 16h11

Citation:

Envoyé par tidus_6_9_2

As-tu essayé de renvoyer une réponse JSonP au lieu de JSon ?

Pour ce faire modifie la ligne suivante:

Code :

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

1
2
 
dataType: "json",

par

Code :

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

1
2
 
dataType: "jsonp",

(pour des infos la dessus tu peux regarder ici au cas ou)

Je viens d'essayer mais aucun résultat tant au niveau de l'alert qu'au niveau de la fonction d'autocompletion même en ajoutant la ligne

Code :

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

header('content-type: application/json; charset=utf-8');

Je crois que je vais voir un peu plus tard (si personne ne peut m'aider à trouver pourquoi ça ne marche pas) pour me le taper à la mano ou alors essayer de trouver un code source bien expliqué.

danielhagnoul · 27/11/2011, 22h30

Bonsoir

Si vous utilisez l'UI Autocomplete , vous devez charger les styles UI et les scripts jQuery et jQuery UI.

Voir : http://www.developpez.net/forums/d10...16-disponible/

UI Autocomplete travaille en JSON ou en JSONP (http://jqueryui.com/demos/autocomplete/#remote, http://jqueryui.com/demos/autocomple...ote-with-cache, http://jqueryui.com/demos/autocomplete/#remote-jsonp).

L'infâme "async: false", il bloque toute la page web, n'est utilisé nulle part dans le code source des exemples.

Bien entendu, en JSONP le serveur doit être réglé pour lui en fournir.

Zweet · 28/11/2011, 07h47

Citation:

Envoyé par danielhagnoul

Bonsoir

Si vous utilisez l'UI Autocomplete , vous devez charger les styles UI et les scripts jQuery et jQuery UI.

Voir : http://www.developpez.net/forums/d10...16-disponible/

UI Autocomplete travaille en JSON ou en JSONP (http://jqueryui.com/demos/autocomplete/#remote, http://jqueryui.com/demos/autocomple...ote-with-cache, http://jqueryui.com/demos/autocomplete/#remote-jsonp).

L'infâme "async: false", il bloque toute la page web, n'est utilisé nulle part dans le code source des exemples.

Bien entendu, en JSONP le serveur doit être réglé pour lui en fournir.

Bonjour, merci de prendre le temps de m'aider. J'ai bien intégrer à présent la feuille de style dans ma page html:

Code :

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

<link rel="stylesheet" type="text/css" src="./lib/css/ui-lightness/jquery-ui-1.8.16.custom.css">

J'ai aussi enlevé l'infâme async.

Là j'essaye de voir pour récupérer le contenu de ma requête en json.

Donc pour récupérer ma requête en JSON je me suis basé sur view-source:http://api.geonames.org/citiesJSON?f...emo&style=full

Et j'ai essayé de reprendre le modèle du code qu'ils utilisent en comparant leur fichier JSON et un fichier JSON que j'ai écrit (fopen, fwrite, etc) j'en arrive donc à ces lignes là (je remet les fichiers car je les ai fait évoluer).

index.php:

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test Autocompletion</title>
 
		<SCRIPT type="text/javascript" src="./lib/js/lib_jq.js" ></SCRIPT>
		<SCRIPT type="text/javascript" src="./lib/js/lib_fct_jq.js" ></SCRIPT>
		<SCRIPT type="text/javascript" src="./lib/js/autocomplete.js"></SCRIPT>
		<link rel="stylesheet" type="text/css" src="./lib/css/ui-lightness/jquery-ui-1.8.16.custom.css">
 
 
	</head>
    <body>
	 <style>
	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
	#groupes { width: 25em; }
	</style>
 
 
 
	<div class="ui-widget">
		<label for="groupes">Groupe : </label>
		<input id="groupes"/>
 
	</div>
 
	<div class="ui-widget" style="margin-top:2em; font-family:Arial">
		Groupe s&eacute;lectionn&eacute; :
		<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
	</div>
 
 
 
    </body>
</html>

autocomplete.js:

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
	$(function() {
		function log( message ) {
			$( "<div/>" ).text( message ).prependTo( "#log" );
			$( "#log" ).scrollTop( 0 );
 
		}
 
		$( "#groupes" ).autocomplete({
			source: function( request, response ) {
				$.ajax({
					url: "get_group.php",
					dataType: "jsonp",
					data: {
						featureClass: "P",
						style: "full",
						maxRows: 12,
						name_startsWith: request.term
					},
					success: function(data) {
						response(function( item ) {
							return {
								label: item.groupe,
								value: item.name
							}
 
						});
					}
				});
			},
 
			minLength: 2,
			select: function( event, ui ) {
				log( ui.item ?
					"Selected: " + ui.item.label :
					"Nothing selected, input was " + this.value);
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
		});
	});

et surtout le get_group.php pour la sécurité:

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
46
47
48
49
50
51
52
53
54
55
56
<?php ('content-type: application/json; charset=utf-8');
 
	$db = include("connect.php");
 
	if (!$db){
	 echo "Erreur de connexion MYSQL";
	 }
 
	else{
 
			$search = $_GET['term'];
			if(!$search)
				{
				return;
				}
			$result = mysql_query("SELECT groupe FROM t_groupes WHERE groupe LIKE '".$search."%'  ORDER BY groupe ASC") or die('Problème de connexion au système de gestion de base de données au niveau requête !');
			$rows = array();
			while ($row = mysql_fetch_assoc($result)){
				$rows[] = $row;
 
			}
 
			// on exclut tous les caractères spéciaux ainsi que les mots pouvant servir à faire des injections SQL.
			function is_valid_callback($search)
		{
			$caracteres_interdits
			  = '/^[$_\p{L}][$_\p{L}\p{Mn}\p{Mc}\p{Nd}\p{Pc}\x{200C}\x{200D}]*+$/u';
 
			$mots_interdits = array('break', 'do', 'instanceof', 'typeof', 'case',
			  'else', 'new', 'var', 'catch', 'finally', 'return', 'void', 'continue',
			  'for', 'switch', 'while', 'debugger', 'function', 'this', 'with',
			  'default', 'if', 'throw', 'delete', 'in', 'try', 'class', 'enum',
			  'extends', 'super', 'const', 'export', 'import', 'implements', 'let',
			  'private', 'public', 'yield', 'interface', 'package', 'protected',
			  'static', 'null', 'true', 'false');
 
			return preg_match($caracteres_interdits, $search)
				&& ! in_array(mb_strtolower($search, 'UTF-8'), $mots_interdits);
		}
 
		$json = json_encode($rows);
 
		# Si le callback est faux
		if( ! isset($_GET['callback']))
			exit($json);
 
		# Si le callback est bon
		if(is_valid_callback($_GET['callback']))
			exit("{$_GET['callback']}($json)");
 
		# Mauvaise requête
		header('Status: 400 Bad Request', true, 400);
	}
 
 
?>

Seulement toujours rien niveau récupération des données, en revanche mon code s'exécute bien car il y a une évolution du CSS.

Zweet · 29/11/2011, 10h11

Problème résolu.

Modification du code de autocomplete.js par :

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
	$(function() {
		function log( message ) {
			$( "<div/>" ).text( message ).prependTo( "#log" );
			$( "#log" ).scrollTop( 0 );
		}
 
		$( "#groupes" ).autocomplete({
			source: "get_group.php",
			minLength: 2,
			select: function( event, ui ) {
				log( ui.item ?
					"Groupe choisi: " + ui.item.value :
					"Nothing selected, input was " + this.value );
			}
		});
	});

Code plus simple, plus clair et fonctionnel donc que demander de plus?

23/11/2011, 15h26	#2
tidus_6_9_2 Membre du Club Inscription : janvier 2008 Messages : 150 Détails du profil Informations forums : Inscription : janvier 2008 Messages : 150 Points : 57 Points : 57	Il me semble que la requête que tu effectuée ne gère que le JsonP et non le Json. Mais je ne suis pas sûr. Es-ce que tu arrives déjà à faire une alerte dans Code : Sélectionner tout - Visualiser dans une fenêtre à part success: function( data ) { alert('x');} pour voir si tu reçois quelque chose ou non ?
	00

27/11/2011, 22h30	#8
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir Si vous utilisez l'UI Autocomplete , vous devez charger les styles UI et les scripts jQuery et jQuery UI. Voir : http://www.developpez.net/forums/d10...16-disponible/ UI Autocomplete travaille en JSON ou en JSONP (http://jqueryui.com/demos/autocomplete/#remote, http://jqueryui.com/demos/autocomple...ote-with-cache, http://jqueryui.com/demos/autocomplete/#remote-jsonp). L'infâme "async: false", il bloque toute la page web, n'est utilisé nulle part dans le code source des exemples. Bien entendu, en JSONP le serveur doit être réglé pour lui en fournir. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email