Bonjour à tous,

Je poste un message ici car je souhaites créer une liste déroulante dynamique à l'instar des sites de recherche d'avion tel que airfrance, ou bien booking pour les recherches d'hotel.
J'ai pu créer une liste déorulante dynamique avec des données statiques donc les codes (script.js et index.html) sont ci dessous.

Je souhaites donc remplacer les valeurs saisies en dur dans le fichier script.js afin que cela interroge une base de données (géré sur PhpMyAdmin). La table a interrogé se nomme 'code_pays' (qui contient 2 colonnes, une colonne id et une colonne "name' et le champ à retourner dynamiquement pour la recherche est donc la colonne name.

Serait-il possible de m'aider sur les modifications à apporter.


J'ai le code script.js suivant :

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
// Liste d'exemple d'aéroports ou de villes
const airports = [
    "Paris Charles de Gaulle (CDG)",
    "New York John F. Kennedy (JFK)",
    "Londres Heathrow (LHR)",
    "Tokyo Haneda (HND)",
    "Dubai International (DXB)",
    "Los Angeles International (LAX)",
    "Singapour Changi (SIN)",
    "Amsterdam Schiphol (AMS)",
    "Franckfort (FRA)",
    "Hong Kong (HKG)"
];
 
// Fonction pour mettre à jour les suggestions en fonction de l'entrée utilisateur
function updateSuggestions() {
    const input = document.getElementById('searchInput').value.toLowerCase();
    const suggestionsBox = document.getElementById('suggestionsBox');
 
    // Supprimer toutes les suggestions existantes
    suggestionsBox.innerHTML = '';
 
    // Filtrer les aéroports en fonction de l'entrée
    const filteredAirports = airports.filter(airport =>
        airport.toLowerCase().includes(input)
    );
 
    // Si des correspondances sont trouvées, les ajouter à la boîte de suggestions
    if (filteredAirports.length > 0) {
        filteredAirports.forEach(airport => {
            const suggestion = document.createElement('div');
            suggestion.textContent = airport;
            suggestion.onclick = () => selectSuggestion(airport);
            suggestionsBox.appendChild(suggestion);
        });
    } else {
        // Si aucune correspondance, afficher un message
        const noMatch = document.createElement('div');
        noMatch.textContent = "Aucun résultat trouvé";
        noMatch.className = "no-match";
        suggestionsBox.appendChild(noMatch);
    }
}
 
// Fonction pour sélectionner une suggestion
function selectSuggestion(airport) {
    const input = document.getElementById('searchInput');
    input.value = airport;  // Mettre à jour l'entrée avec la suggestion choisie
    document.getElementById('suggestionsBox').innerHTML = '';  // Effacer les suggestions
}
 
// Ajouter un écouteur d'événements pour appeler la fonction à chaque saisie
document.getElementById('searchInput').addEventListener('input', updateSuggestions);
J'ai également le code index.html suivant :

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recherche d'aéroport</title>
    <style>
        .dropdown {
            width: 300px;
            padding: 8px;
            position: relative;
        }
 
        .suggestions {
            border: 1px solid #ccc;
            border-top: none;
            max-height: 200px;
            overflow-y: auto;
            position: absolute;
            width: 100%;
            z-index: 1000;
            background-color: #fff;
        }
 
        .suggestions div {
            padding: 8px;
            cursor: pointer;
        }
 
        .suggestions div:hover {
            background-color: #f0f0f0;
        }
 
        .no-match {
            color: #999;
            padding: 8px;
        }
    </style>
</head>
<body>
    <input type="text" id="searchInput" placeholder="Rechercher un aéroport..." class="dropdown">
    <div id="suggestionsBox" class="suggestions"></div>
 
    <script src="script.js"></script>
</body>
</html>