Autocomplétion Input vers Select (CP/Ville)
Bonjour le peuple !
Tout d'abord merci de prendre en compte le fait que je sois un néophyte en la matière, et bien que parcourant le web à la recherche d'une multitude de post sur le sujet, des tutos, des appels à l'aide .. peut-être que la réponse est déjà tombée sous mes yeux mais que je n'ai pas les capacités pour l'assimiler .. BREF :'(
Je suis parti de ce tuto pour autocomplétion sur 2 champs (Un grand merci déjà !)
J'ai mis 3 jours pour que ça fonctionne .. j'ai épuré le code pour que ce soit adapté à mon cas mais pour la dernière étape je ne sais même pas si elle est réalisable
Pour l'instant, j'ai deux champs input, le premier code postal, le second ville.
Je tape un code postal, la requête va chercher les résultats des villes dans la BDD et ça m'affiche une DIV façon Google Search je clique sur la ville correspondante et ça l'insère dans le second input ville.
Tout est OK c'est de toute beauté !
Mais ! Ce que j'aimerai avoir c'est deux champs, le premier input code postal, le second select ville
Je tape un code postal, la requête va chercher les résultats des villes dans la BDD et ça modifie le select en insérant les options ensuite je choisis le select correspondant à ma ville
Est-ce que c'est possible et facilement réalisable ?
Mon bout de code Javascript
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
| <script type="text/javascript">
var cache = {};
$(function ()
{
$("#inscriptioncp, #inscriptionville").autocomplete({
source: function (request, response)
{
//Si la réponse est dans le cache
if ((request.term) in cache)
{
response($.map(cache[request.term], function (item)
{
return {
label: item.Ville,
value: function ()
{
$('#inscriptionville').val(item.Ville);
return item.CodePostal;
}
}
}));
}
//Sinon -> Requete Ajax
else
{
var objData = {};
objData = { codePostal: request.term, maxRows: 20 };
$.ajax({
url: "./AutoCompletion.php",
dataType: "json",
data: objData,
type: 'POST',
success: function (data)
{
//Ajout de reponse dans le cache
cache[(request.term)] = data;
response($.map(data, function (item)
{
return {
label: item.Ville,
value: function ()
{
$('#inscriptionville').val(item.Ville);
return item.CodePostal;
}
}
}));
}
});
}
},
minLength: 4,
delay: 600
});
});
</script> |
Mon bout de code 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
| <?php
require_once('AutoCompletionCPVille.class.php');
//Initialisation de la liste
$list = array();
//Connexion MySQL
try { $db = new PDO('mysql:host=localhost;dbname=GLC', 'root', ''); }
catch (Exception $ex) { echo $ex->getMessage(); }
if ($_POST["codePostal"]{0} == 0) {
$_POST["codePostal"] = substr($_POST["codePostal"],1);
}
//Construction de la requete
$strQuery = 'SELECT CP CodePostal, VILLE Ville FROM codepostal WHERE LENGTH(CP) = LENGTH('.$_POST["codePostal"].') AND CP LIKE :codePostal ORDER BY VILLE ';
//Limite
if (isset($_POST["maxRows"]))
{
$strQuery .= 'LIMIT 0, :maxRows';
}
$query = $db->prepare($strQuery);
$value = $_POST["codePostal"]."%";
$query->bindParam(":codePostal", $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");;
foreach ($list as $row){
$row->Ville = utf8_encode($row->Ville);
}
echo json_encode($list);
?> |
Naïvement j'espérais qu'ayant le résultat attendu c'était juste la mise en forme qui était à revoir mais en regardant ce second tuto chapitre IV, la méthode employée est TOTALEMENT différente avec problème de compatibilité navigateurs notamment ie (d'où quelques craintes..)
Cependant est-ce que la solution serait dans ce coin là ?
Faire un mix des deux méthodes pour que ça coïncide à ce que je recherche comme résultat ?
Merci à la personne qui prendra un peu de son temps pour m'éclairer :zoubi:
