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
| <body>
<h1>Recherche de ville ou code postal</h1>
<!-- Formulaire pour saisir la recherche -->
<form id="searchForm">
<input type="text" id="searchInput" placeholder="Entrez une ville ou un code postal" " >
<!-- Champ pour afficher le résultat final -->
<input type="text" id="finalResult" readonly>
</form>
<!-- Conteneur pour afficher les résultats -->
<div id="resultContainer">
<ul id="result"></ul>
</div>
<!-- Chargement de la bibliothèque jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Fonction de recherche lors de la saisie dans l'input
$("#searchInput").on("input", function () {
// Récupérer la valeur saisie par l'utilisateur
const input = $("#searchInput").val().trim(); // alert(input);
// Vérifier que la saisie a au moins 3 caractères
if (input.length >= 3) {
// Lancer la recherche avec un délai de 500 ms (pour éviter trop de requêtes à chaque frappe)
clearTimeout(this.timer); // Supprimer le précédent délai (s'il existe)
this.timer = setTimeout(function() {
performSearch(input);
}, 500);
}
});
function performSearch(input) {
// Envoyer une requête AJAX pour effectuer la recherche côté serveur (dans le fichier c.php)
$.ajax({
url: `codepPDO.php?query=${encodeURIComponent(input)}`,
type: "GET",
success: function (data) {
// Afficher les résultats dans la div "result"
$("#result").html(data);
// Ajouter un gestionnaire d'événement de clic pour chaque résultat
$("#result li").click(function() {
// Récupérer le texte du résultat cliqué
const selectedResult = $(this).text();
// Afficher le résultat sélectionné dans l'input "finalResult"
$("#finalResult").val(selectedResult);
// Vider le contenu de "#resultContainer"
$("#resultContainer").empty();
//const input = $("#searchInput");
});
},
error: function (error) {
// En cas d'erreur, afficher un message approprié
$("#result").html("Une erreur s'est produite lors de la recherche.");
}
});
}
$("#searchInput").click(function () {
$(this).val(""); // Réinitialiser la valeur de l'input en le vidant
$("#finalResult").val(""); // Réinitialiser la valeur de l'input final également
});
</script>
</body> |
