Bonjour,

J'ai suivi ce tutoriel http://x-zolezzi.developpez.com/tuto...utocompletion/ , pour faire de l'autocompletion code Postale /ville mais je rencontre un petit problème.

J'ai repris exactement le même code que l'auteur :

Index.html : j'ai juste changé les import afin d'avoir des versions plus récentes de jquery et autres (mais même avec les anciennes versions ça ne fonctionne pas )
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<!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.11.1.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
		<link rel="Stylesheet" type="text/css" src="../Projet2Apporteur/jquery-ui/css/custom-theme/jquery-ui-1.9.2.custom"/>
		<script type="text/javascript">
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
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;
									}
								}
							}
						}));
					},
					error: function (jqXHR, textStatus, errorThrown){
						alert("erreur :");
					}
				});
			}
		},
		minLength: 3,
		delay: 600
	});
});
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
		</script>
 
	</head>
	<body>
		<form action="#">
			CP :<input type="text" id="cp" size="6"/>
			Ville : <input type="text" id="ville" />
		</form>
	</body>
</html>

j'ai aussi rajouté ça :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
error: function (jqXHR, textStatus, errorThrown){
	alert("erreur :");
}

autoCompletion.php : j'ai changer la ligne 10 pour les informations de connexion
Code php : 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
<?php
require_once('./AutoCompletionSCPVille.class.php');
//Initialisation de la liste
$list = array();
//Connexion MySQL
try{
    $db = new PDO('mysql:host=localhost;dbname=projetapporteur', 'root', '');
    echo "<p> connexion reussie </p>";
}
catch (Exception $ex){
    echo $ex->getMessage();
}
//Construction de la requete
$strQuery = "SELECT CP CodePostal, VILLE Ville FROM 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);
?>

et AutoCompletionCPVille.class.php
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<?php
class AutoCompletionCPVille {
	public $CodePostal;
	public $Ville;
}
?>

Après avoir écrit 3 chiffres l'alert que j'ai rajouté s'affiche et j'ai ceci comme requete dans la console :

URL de la requête : 	http://localhost/comple/AutoCompletion.php
Méthode de la requête : 	POST
Code d'état : 	HTTP/1.1 200 OK
En-têtes de la requête 11:59:08,000
X-Requested-With:	XMLHttpRequest
User-Agent:	Mozilla/5.0 (Windows NT 6.1; rv:29.0) Gecko/20100101 Firefox/29.0
Referer:	http://localhost/comple/
Pragma:	no-cache
Host:	localhost
Content-Type:	application/x-www-form-urlencoded; charset=UTF-8
Content-Length:	33
Connection:	keep-alive
Cache-Control:	no-cache
Accept-Language:	fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding:	gzip, deflate
Accept:	application/json, text/javascript, */*; q=0.01
En-têtes de la réponse Δ46ms
X-Powered-By:	PHP/5.5.12
Server:	Apache/2.4.9 (Win32) PHP/5.5.12
Keep-Alive:	timeout=5, max=99
Date:	Fri, 06 Jun 2014 09:59:08 GMT
Content-Type:	text/html
Content-Length:	2111
Connection:	Keep-Alive
Merci d'avance