Comment créer une auto-complétion

Apprenez à créer une fonction d'auto-complétion.

Création d'un formulaire d'auto-complétion

Première étape - Ajout de HTML :

<!-- Assurez-vous que le formulaire a désactivé la fonction d'auto-complétion : -->
<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
  </div>
  <input type="submit">
</form>

Deuxième étape - Création de l'array JavaScript :

Tableau des pays et régions du monde entier :

var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central African Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica, Côte d'Ivoire, Croatie, Cuba, Curaçao, Chypre, République tchèque, Danemark, Djibouti, Dominique, République dominicaine, Équateur, Égypte, El Salvador, Guinée équatoriale, Érythrée, Estonie, Éthiopie, Îles Falkland, Îles Féroé, Fidji, Finlande, France, Polynésie française, Antilles françaises, Gabon, Gambie, Géorgie, Allemagne, Ghana, Gibraltar, Grèce, Groenland, Grenade, Guam, Guatemala, Guernesey, Guinée, Guinée-Bissau, Guyane, Haïti, Honduras, Hong Kong, Hongrie, Islande, Inde,Indonésie","Iran","Irak","Irlande","Île de Man","Israël","Italie","Jamaïque","Japon","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Koweït","Kirghizistan","Laos","Lettonie","Liban","Lesotho","Liberia","Libye","Liechtenstein","Lituanie","Luxembourg","Macao","Macédoine","Madagascar","Malawi","Malaisie","Maldives","Mali","Malte","Îles Marshall","Mauritanie","Maurice","Mexique","Micronésie","Moldavie","Monaco","Mongolie","Monténégro","Montserrat","Maroc","Mozambique","Myanmar","Namibie","NauruLe Népal, les Pays-Bas, les Antilles néerlandaises, la Nouvelle-Calédonie, la Nouvelle-Zélande, le Nicaragua, le Niger, le Nigéria, la Corée du Nord, la Norvège, l'Oman, le Pakistan, le Palau, la Palestine, le Panama, la Papouasie-Nouvelle-Guinée, le Paraguay, le Pérou, les Philippines, la Pologne, le Portugal, Porto Rico, le Qatar, La Réunion, la Roumanie, la Russie, le Rwanda, Saint-Pierre et Miquelon, les Samoa, Saint-Marin, São Tomé et Principe, l'Arabie saoudite, le Sénégal, la Serbie, les Seychelles, la Sierra Leone, Singapour, la Slovaquie, la Slovénie, les Îles Salomon, la Somalie, l'Afrique du Sud, la Corée du Sud, le Soudan du Sud,L'Espagne, Sri Lanka, Saint-Kitts-et-Nevis, Sainte-Lucie, Saint-Vincent, Soudan, Suriname, Swaziland, Suède, Suisse, Syrie, Taïwan, Tadjikistan, Tanzanie, Thaïlande, Timor-Leste, Togo, Tonga, Trinité-et-Tobago, Tunisie, Turquie, Turkménistan, Turks et Caïcos, Tuvalu, Ouganda, Ukraine, Émirats arabes unis, Royaume-Uni, États-Unis d'Amérique, Uruguay, Ouzbékistan, Vanuatu, Vatican, Venezuela, Vietnam, Îles Vierges américaines, Yémen, Zambie, Zimbabwe;

Étape 3 - Ajouter du CSS :

Le conteneur doit avoir une position 'relative'.

* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete {
  /* Le conteneur doit être positionné relativement : */
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /* Positionner automatiquement les éléments de complétion à la même largeur que le conteneur : */
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /* Lorsque la souris est au-dessus d'un élément : */
  background-color: #e9e9e9;
}
.autocomplete-active {
  /* Lorsque l'on parcourt les éléments avec les flèches clavier : */
  background-color: DodgerBlue !important;
  color: #ffffff;
}

Étape 4 - Ajouter JavaScript :

function autocomplete(inp, arr) {
  /* La fonction d'auto-complétion nécessite deux paramètres, l'un étant l'élément du champ de texte et l'autre étant un tableau de valeurs potentielles pour l'auto-complétion : */
  var currentFocus;
  /* Fonction exécutée lorsque quelqu'un écrit dans le champ de texte : */
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /* Fermer toute liste de valeurs d'auto-complétion déjà ouverte */
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /* Créer un élément DIV contenant les éléments (valeur) : */
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /* Ajouter ce DIV comme élément enfant du conteneur d'auto-complétion :*/
      this.parentNode.appendChild(a);
      /* Parcourir chaque élément de l'array... */
      for (i = 0; i < arr.length; i++) {
        /* Vérification que l'élément de l'item commence par les lettres identiques à la valeur du champ de texte : */
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /* Créer un élément DIV pour chaque élément correspondant : */
          b = document.createElement("DIV");
          /* Mettre en gras les lettres correspondantes : */
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /* Insérer un champ d'entrée pour sauvegarder la valeur de l'élément actuel de l'array : */
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /* Exécuter une fonction lorsque quelqu'un clique sur une valeur de l'élément (élément DIV) : */
              b.addEventListener("click", function(e) {
              /* Insérer la valeur du champ de texte d'auto-complétion : */
              inp.value = this.getElementsByTagName("input")[0].value;
              /* Fermer la liste des valeurs d'auto-complétion, ou toute autre liste d'auto-complétion ouverte : */
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /* Exécuter une fonction lorsque quelqu'un appuie sur une touche sur le clavier : */
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /* Si la touche flèche vers le bas est appuyée, augmenter la variable currentFocus : */
        currentFocus++;
        /* Et rendre l'élément courant plus visible : */
        addActive(x);
      } else if (e.keyCode == 38) { // haut
        /* Si la touche flèche vers le haut est appuyée, diminuer la variable currentFocus : */
        currentFocus--;
        /* Et rendre l'élément courant plus visible : */
        addActive(x);
      } else if (e.keyCode == 13) {
        /* Si la touche ENTRÉE est appuyée, empêcher le soumission du formulaire : */
        e.preventDefault();
        if (currentFocus > -1) {
          /* Simuler un clic sur l'élément "actif" : */
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /* Fonction pour classer les éléments en tant que "actifs" : */
    if (!x) return false;
    /* Supprimer d'abord la classe "active" de tous les éléments : */
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /* Ajouter la classe "autocomplete-active" : */
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /* Fonction pour supprimer la classe "autocomplete-active" de tous les éléments d'auto-complétion : */
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    /* Fermer toutes les listes d'auto-complétion du document, sauf celle passée en paramètre : */
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
      x[i].parentNode.removeChild(x[i]);
    }
  }
}
/* Fonction exécutée lorsque quelqu'un clique sur le document */
document.addEventListener("click", function (e) {
    closeAllLists(e.target);
});
}

Étape 5 - Activer la fonction d'auto-complétion sur "myInput" :

L'array des pays est passé en tant que autocomplete Le second paramètre de la fonction est passé :

<script>
autocomplete(document.getElementById("myInput"), countries);
</script>

Essayer par vous-même