Autocompletion avec Jquery

**Mr_Exal** · 23/11/2011, 16h12

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, 16h26

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 ?

**Mr_Exal** · 23/11/2011, 16h45

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, 16h50

Et voilà pour finir mon fichier autocompletion.js

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

**Mr_Exal** · 23/11/2011, 16h55

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, 17h05

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)

**Mr_Exal** · 23/11/2011, 17h11

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, 23h30

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.

**Mr_Exal** · 28/11/2011, 08h47

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.

**Mr_Exal** · 29/11/2011, 11h11

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?

Autocompletion avec Jquery

jQuery

Discussions similaires

Partager

Partager