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 :
Merci d'avanceURL 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
Partager