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.