Autocompletion avec Jquery

Version imprimable

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:

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:

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:

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:

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.

23/11/2011, 15h26
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:

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

pour voir si tu reçois quelque chose ou non ?
23/11/2011, 15h45
Mr_Exal

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:

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.
23/11/2011, 15h50
Bovino

Citation:

Et voilà pour finir mon fichier autocompletion.js

Euh... il apparait pas dans ton index.php :koi:
23/11/2011, 15h55
Mr_Exal
Citation:

Envoyé par Bovino

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

autocomplete.js autant pour moi :roll:

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

J'ai changé
Code:

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

1 2 <label for="groupes">Groupe : </label> <input id="groupes"/>
dans l'index.php je pense que ça aidera déjà "un peu".
23/11/2011, 16h05
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:

1 2 dataType: "json",
par
Code:

1 2 dataType: "jsonp",
(pour des infos la dessus tu peux regarder ici au cas ou)
23/11/2011, 16h11
Mr_Exal
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:

1 2 dataType: "json",

par

Code:

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:

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é.
27/11/2011, 22h30
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.

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:

<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:

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:

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:

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.

Problème résolu.

Modification du code de autocomplete.js par :

Code:

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?