Bonjour, je cherche à afficher une liste de villes à partir d'un input "code postal".
Chatgpt m'a donné la solution ci-dessous qui marche mais je voudrais pouvoir en cas d'erreur pouvoir réinitialiser.
Pour cela il m'a donné la function $("#searchInput").click(function () { ... } qui marche mais le problème c'est qu'en rentrant un nouveau code postal après avoir vider ça marche plus.
Comment réinitialiser sans le faire par le navigateur qui réinitialiserais tout mon formulaire (non affiché ici) ?
Code html : 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
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>
Partager