Fonctionnalité Autocomplétion tutoriel Xavier Zolezzi

Version imprimable

Bonjour,

j'ai trouvé exactement ce que je recherche à travers l'excellent tutoriel de Xavier Zolezzi : AutoComplétion Code Postal/Ville avec jQuery

Cependant, malgré le script fourni, il ne marche pas.

J'ai réalisés les étapes demandées.

J'ai bien créé la table "cp_autocomplete" avec les champs + importation du fichier sql (ok) comme demandé :

CODEPAYS char(2)
CP varchar varchar(10)
VILLE varchar(180)

Le fichier index.html propose les inputs suivants :
id="cp"
id ="ville"

En suivant les instructions, j'ai modifié les données de connexion à :
Code:

1 2 3 4 5 6 7 8 9 10 11 //Connexion MySQL try { $bdd = new PDO('mysql:host=localhost;dbname=test', 'root', ''); } catch(Exception $e) { die('Erreur : '.$e->getMessage()); }
1er problème : il semble que je n'arrive pas à me connecter car il ne se passe rien. Pour tester la connexion, j'ai volontairement rentré le nom d'une base inexistante (test1) mais je n'ai aucun message d'erreur ???

Mon deuxième problème : je ne suis pas un expert en requête SQL (entre autre) mais elle me semble comporter des erreurs

AutoCompletion.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 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 <?php require_once('./AutoCompletionCPVille.class.php'); //Initialisation de la liste $list = array(); //Connexion MySQL try { $bdd = new PDO('mysql:host=localhost;dbname=test', 'root', ''); } catch(Exception $e) { die('Erreur : '.$e->getMessage()); } //Construction de la requete $strQuery = "SELECT CP CodePostal, VILLE Ville FROM autocomplete WHERE "; // 1. correction de autocomplete => cp_autocomplete (je crois) -- 2. D'ou vient CodePostal ??????? if (isset($_POST["codePostal"])) { $strQuery .= "CP LIKE :codePostal "; // faut-il modifier tous les champs ??? } else { $strQuery .= "VILLE LIKE :ville "; } $strQuery .= "AND CODEPAYS = 'FR' "; //Limite if (isset($_POST["maxRows"])) { $strQuery .= "LIMIT 0, :maxRows"; } $query = $db->prepare($strQuery); if (isset($_POST["codePostal"])) { $value = $_POST["codePostal"]."%"; $query->bindParam(":codePostal", $value, PDO::PARAM_STR); } else { $value = $_POST["ville"]."%"; $query->bindParam(":ville", $value, PDO::PARAM_STR); } //Limite if (isset($_POST["maxRows"])) { $valueRows = intval($_POST["maxRows"]); $query->bindParam(":maxRows", $valueRows, PDO::PARAM_INT); } $query->execute(); $list = $query->fetchAll(PDO::FETCH_CLASS, "AutoCompletionCPVille");; echo json_encode($list); ?>
les 3 fichiers sont :
- indes.html
- AutoCompletion.php
- AutoCompletionCPVille.class.php

Ces 3 fichiers sont dans le dossier www de WAMP.

Merci pour votre aide.

Pour y voir plus clair tu peux activer les erreurs PDO :
Code:

1 2 $bdd = new PDO('mysql:host=localhost;dbname=test', 'root', ''); $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
"CodePostal" est un alias de la colonne "CP".

Bonjour merci pour votre retour,

j'ai bien repris intégralement la démarche du tutoriel : création de la base de données + importation : cp_autocomplete

j'ai rajouté le code

Code:

1
2
 
$bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

je n'ai aucun message d'erreur ? même en mettant une table qui n'existe pas

index.html

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head >
		<title>AutoCompletion</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>
		<script type="text/javascript">
			var cache = {};
			$(function ()
			{
				$("#cp, #ville").autocomplete({
					source: function (request, response)
					{
						//Si la réponse est dans le cache
						if (('FR' + '-' + request.term) in cache)
						{
							response($.map(cache['FR' + '-' + request.term], function (item)
							{
 
								return {
									label: item.CodePostal + ", " + item.Ville,
									value: function ()
									{
										if ($(this).attr('id') == 'cp')
										{
											$('#ville').val(item.Ville);
											return item.CodePostal;
										}
										else
										{
											$('#cp').val(item.CodePostal);
											return item.Ville;
										}
									}
								}
							}));
						}
						//Sinon -> Requete Ajax
						else
						{
							var objData = {};
							if ($(this.element).attr('id') == 'cp')
							{
								objData = { codePostal: request.term, pays: 'FR', maxRows: 10 };
							}
							else
							{
								objData = { ville: request.term, pays: 'FR', maxRows: 10 };
							}
							$.ajax({
								url: "./AutoCompletion.php",
								dataType: "json",
								data: objData,
								type: 'POST',
								success: function (data)
								{
									//Ajout de reponse dans le cache
									cache[('FR' + '-' + request.term)] = data;
									response($.map(data, function (item)
									{
 
										return {
											label: item.CodePostal + ", " + item.Ville,
											value: function ()
											{
												if ($(this).attr('id') == 'cp')
												{
													$('#ville').val(item.Ville);
													return item.CodePostal;
												}
												else
												{
													$('#cp').val(item.CodePostal);
													return item.Ville;
												}
											}
										}
									}));
								}
							});
						}
					},
					minLength: 3,
					delay: 600
				});
			});
		</script>
		<link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" />
	</head>
	<body>
		<form action="#">
			CP :<input type="text" id="cp" size="6"/>
			Ville : <input type="text" id="ville" />
		</form>
	</body>
</html>

AutoCompletion.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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
 
<?php
require_once('./AutoCompletionCPVille.class.php');
 
//Initialisation de la liste
$list = array();
 
//Connexion MySQL
try
{
    $db = new PDO('mysql:host=localhost;dbname=test', 'root', '');
    $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
}
 
//Construction de la requete
$strQuery = "SELECT CP CodePostal, VILLE Ville FROM cp_autocomplete WHERE ";
if (isset($_POST["codePostal"]))
{
    $strQuery .= "CP LIKE :codePostal ";
}
else
{
    $strQuery .= "VILLE LIKE :ville ";
}
$strQuery .= "AND CODEPAYS = 'FR' ";
//Limite
if (isset($_POST["maxRows"]))
{
    $strQuery .= "LIMIT 0, :maxRows";
}
$query = $db->prepare($strQuery);
if (isset($_POST["codePostal"]))
{
    $value = $_POST["codePostal"]."%";
    $query->bindParam(":codePostal", $value, PDO::PARAM_STR);
}
else
{
    $value = $_POST["ville"]."%";
    $query->bindParam(":ville", $value, PDO::PARAM_STR);
}
//Limite
if (isset($_POST["maxRows"]))
{
    $valueRows = intval($_POST["maxRows"]);
    $query->bindParam(":maxRows", $valueRows, PDO::PARAM_INT);
}
 
$query->execute();
 
$list = $query->fetchAll(PDO::FETCH_CLASS, "AutoCompletionCPVille");;
 
echo json_encode($list);
?>

AutoCompletionCPVille.class.php

Code:

1
2
3
4
5
6
7
8
 
 
<?php
class AutoCompletionCPVille {
	public $CodePostal;
	public $Ville;
}
?>

lorsque je lance le fichier.html, rien ne se passe après avoir rempli le champ code postal ????

20/03/2018, 01h17
bricoreur

Bonsoir

Je viens de lire un post récent qui reprenait le même tuto que moi..et il ne marchait pas non plus chez lui...un expert peut il regarder cela car à mon avis on est très nombreux en avoir besoin..sinon ne serait ce que pour le tuto en lui même
Oubien fonctionne t’il bien chez les autres
Merci d’avance
20/03/2018, 10h30
Celira

Bon, c'est un appel via Ajax. Donc il peut y avoir deux sources de problème : soit la partie client en JS, soit la partie serveur en PHP.

Déjà, tu peux tester le script PHP directement, en appelant directement le script dans un navigateur. Vu que dans ce cas, tu n'auras rien dans $_POST pour filtrer, ça devrait te retourner la totalité des données en table.

Si le script PHP fonctionne, il faudra débugguer le côté JS avec les outils de dév de ton navigateur.
21/03/2018, 11h51
bricoreur

Merci pour votre retour

mais cela dépasse mes malheureusement compétences à ce jour...

Cdt