ajax/jquery remise à 0

**gisminth** · 30/07/2023, 11h12

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.

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>

Comment réinitialiser sans le faire par le navigateur qui réinitialiserais tout mon formulaire (non affiché ici) ?

**Toufik83** · 30/07/2023, 17h32

Bonjour,

Avec cette ligne $("#resultContainer").empty(); tu supprimes tout le contenu de <div id="resultContainer"></div> y compris le <ul id="result"></ul> à l'intérieur.

il faudrait vider seulement le ul :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#result").empty();

Et Pour réinitialiser le formulaire, il suffit de modifier le code du bloc error comme suite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
error: function (error) {
       // En cas d'erreur, afficher un message approprié dans un <li>.
       $("#result").html("<li>Une erreur s'est produite lors de la recherche.</li>");
       //Simuler le click sur #searchInput
       setTimeout(function(){
		$("#searchInput").trigger("click");
	},1000);
}

**SpaceFrog** · 31/07/2023, 08h31

On dirait que les codeurs n'ont pas encore trop de souci à se faire

J'ai pu aussi tester du code de chatGPT ... pas brillant

**gisminth** · 31/07/2023, 11h30

Merci Toufik83 ça marche !
Je suis loin d'avoir tes compétences et je n'aurais pas trouvé et comme le dit Spacefrog chatgpt ne peut remplacer un codeur compétent.
Il a néanmoins le mérite d'aider ceux qui ne le sont pas et espèrent peut être un jour le devenir.

ajax/jquery remise à 0

jQuery

Vue hybride

Discussions similaires

Partager

Partager