Autocompletion avec Jquery

**Mr_Exal** · 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 ?

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

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

Et voilà pour finir mon fichier autocompletion.js

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

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

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)

Autocompletion avec Jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager