Liste déroulante dynamique avec recherche

**pun79** · 27/08/2024, 20h26

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>

**mathieu** · 28/08/2024, 04h14

pour lire la base de données mysql, vous aurez besoin de code côté serveur comme du php par exemple.

vous pouvez voir des exemples de code dans ces articles :
https://sylvie-vauthier.developpez.c...=intro-bdd#LVI
https://g-rossolini.developpez.com/t...t/?page=page-6
https://g-rossolini.developpez.com/t...s/?page=page-7

**pun79** · 28/08/2024, 06h44

Bonjour,

Je vous remercie pour votre retour.

La connexion à la base de données afin de récupérer des données et/ou insérer/modifier les données dans la BDD ne me pose pas de problème.

Le soucis c'est de rendre dynamique l'affichage des pays.

J'ai déjà le code suivant en photo qui me permet de me connecter à la base :

include(./connexion.php);

Et la requête suivante pour récupérer les pays :

SELECT name FROM code_avion

Ce qui me pose donc problème c'est que je ne sais pas comment remplacer mon code javascript (qui contient actuellement une liste figé d'aéroport) par ma requête et le résultat fournit par ma requête.

**mathieu** · 28/08/2024, 08h18

pour passer des données de php vers javascript, vous pouvez générer la page comme cela :

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
<?php
// ici le code php qui lit la base de données et qui met la liste des éléments dans la variable $liste
 
$liste = ["élément 1", "élément 2"];
 
 
?>
<html>
.....
<script>
const airports = <?= json_encode($liste)?>;
console.log(airports);
</script>
<script src="script.js"></script>

**NoSmoking** · 28/08/2024, 18h29

Bonjour,
suivant le nombre d'éléments à gérer il peut s’avérer intéressant d'utiliser un élément <datalist>, pas de JavaScript à écrire pour l'autocomplétion et construction aisée côté serveur.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<input list="list-aeroport" placeholder="Rechercher un aéroport">
<datalist id="list-aeroport">
  <option>Paris Charles de Gaulle (CDG)
  <option>New York John F. Kennedy (JFK)
  <option>Londres Heathrow (LHR)
  <option>Tokyo Haneda (HND)
  <option>Dubai International (DXB)
  <option>Los Angeles International (LAX)
  <option>Singapour Changi (SIN)
  <option>Amsterdam Schiphol (AMS)
  <option>Franckfort (FRA)
  <option>Hong Kong (HKG)
</datalist>

**pun79** · 31/08/2024, 08h47

Merci pour ton retour, c'est ce que je cherchais à faire. Je ne connaissais pas la fonctionnalité "datalist" en HTML.
Cela résoudra effectivement mon soucis et sera donc alimenté automatiquement par une requête SQL.

Envoyé par NoSmoking

Bonjour,
suivant le nombre d'éléments à gérer il peut s’avérer intéressant d'utiliser un élément <datalist>, pas de JavaScript à écrire pour l'autocomplétion et construction aisée côté serveur.

J'ai ajouté le code JavaScript suivant afin la recherche s'effectue à partir des premiers caractères. Ainsi, en saisiant la lettre D, cela affiche seulement Dubai et non tous les aéroports contenant la lettre D.

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
 
<script>
    const input = document.getElementById('aeroport-input');
    const datalist = document.getElementById('list-aeroport');
 
    // Stocker toutes les options initiales
    const initialOptions = Array.from(datalist.querySelectorAll('option')).map(option => option.cloneNode(true));
 
    input.addEventListener('input', () => {
      const searchValue = input.value.toUpperCase();
 
      // Si l'input est vide, restaurer les options initiales
      if (searchValue === '') {
        datalist.innerHTML = '';
        initialOptions.forEach(option => datalist.appendChild(option.cloneNode(true)));
        return;
      }
 
      const filteredOptions = initialOptions.filter(option =>
        option.textContent.toUpperCase().startsWith(searchValue)
      );
 
      // Mettre à jour le datalist avec les options filtrées
      datalist.innerHTML = '';
      filteredOptions.forEach(option => datalist.appendChild(option.cloneNode(true)));
 
      // Afficher une option vide si aucune option ne correspond
      if (!datalist.hasChildNodes()) {
        const emptyOption = document.createElement('option');
        emptyOption.textContent = 'Aucun résultat';
        datalist.appendChild(emptyOption);
      }
    });
  </script>

Liste déroulante dynamique avec recherche

AJAX

Discussions similaires

Partager

Partager