C’est un composant input qui lors de la saisie, propose une liste d’items alimentée par un service externe.
Documentation : Figma | Développeur
Langage: HTML
<div class="autocomplete">
<label class="form-label" for="autocomplete_378637426">
Libellé de l'élément<span class="required"> *</span></label>
<div class="form-control-wrapper">
<input class="form-control autocomplete-input" data-autocomplete="true" id="autocomplete_378637426" name="autocomplete_378637426" placeholder=" " required type="text" value="error">
<ft-autocomplete input-id="autocomplete_378637426" label-property="name"></ft-autocomplete>
</div>
</div>
// L'aperçu n'est pas disponible pour les dépendances externes
window['countries'] = [
{ "index": 1, "name": "Afghanistan" },
{ "index": 2, "name": "Îles Åland" },
{ "index": 3, "name": "Albanie" },
{ "index": 4, "name": "Algérie" },
{ "index": 5, "name": "Samoa américaines" },
{ "index": 6, "name": "Andorre" },
{ "index": 7, "name": "Angola" },
{ "index": 8, "name": "Anguilla" },
{ "index": 9, "name": "Antarctique" },
{ "index": 10, "name": "Antigua-et-Barbuda" },
{ "index": 11, "name": "Argentine" },
{ "index": 12, "name": "Arménie" },
{ "index": 13, "name": "Aruba" },
{ "index": 14, "name": "Australie" },
{ "index": 15, "name": "Autriche" },
{ "index": 16, "name": "Azerbaïdjan" },
{ "index": 17, "name": "Bahamas" },
{ "index": 18, "name": "Bahreïn" },
{ "index": 19, "name": "Bangladesh" },
{ "index": 20, "name": "Barbade" },
{ "index": 21, "name": "Biélorussie" },
{ "index": 22, "name": "Belgique" },
{ "index": 23, "name": "Belize" },
{ "index": 24, "name": "Bénin" },
{ "index": 25, "name": "Bermudes" },
{ "index": 26, "name": "Bhoutan" },
{ "index": 27, "name": "Bolivie" },
{ "index": 28, "name": "Bosnie-Herzégovine" },
{ "index": 29, "name": "Botswana" },
{ "index": 30, "name": "Île Bouvet" },
{ "index": 31, "name": "Brésil" },
{ "index": 32, "name": "Territoire britannique de l'océan Indien" },
{ "index": 33, "name": "Brunei" },
{ "index": 34, "name": "Bulgarie" },
{ "index": 35, "name": "Burkina Faso" },
{ "index": 36, "name": "Burundi" },
{ "index": 37, "name": "Cambodge" },
{ "index": 38, "name": "Cameroun" },
{ "index": 39, "name": "Canada" },
{ "index": 40, "name": "Cap-Vert" },
{ "index": 41, "name": "Îles Caïmans" },
{ "index": 42, "name": "République centrafricaine" },
{ "index": 43, "name": "Tchad" },
{ "index": 44, "name": "Chili" },
{ "index": 45, "name": "Chine" },
{ "index": 46, "name": "Île Christmas" },
{ "index": 47, "name": "Îles Cocos" },
{ "index": 48, "name": "Colombie" },
{ "index": 49, "name": "Comores" },
{ "index": 50, "name": "République du Congo" },
{ "index": 51, "name": "République démocratique du Congo" },
{ "index": 52, "name": "Îles Cook" },
{ "index": 53, "name": "Costa Rica" },
{ "index": 54, "name": "Côte d'Ivoire" },
{ "index": 55, "name": "Croatie" },
{ "index": 56, "name": "Cuba" },
{ "index": 57, "name": "Chypre" },
{ "index": 58, "name": "République tchèque" },
{ "index": 59, "name": "Danemark" },
{ "index": 60, "name": "Djibouti" },
{ "index": 61, "name": "Dominique" },
{ "index": 62, "name": "République dominicaine" },
{ "index": 63, "name": "Équateur" },
{ "index": 64, "name": "Égypte" },
{ "index": 65, "name": "Salvador" },
{ "index": 66, "name": "Guinée équatoriale" },
{ "index": 67, "name": "Érythrée" },
{ "index": 68, "name": "Estonie" },
{ "index": 69, "name": "Éthiopie" },
{ "index": 70, "name": "Îles Falkland" },
{ "index": 71, "name": "Îles Féroé" },
{ "index": 72, "name": "Fidji" },
{ "index": 73, "name": "Finlande" },
{ "index": 74, "name": "France" },
{ "index": 75, "name": "Guyane française" },
{ "index": 76, "name": "Polynésie française" },
{ "index": 77, "name": "Terres australes et antarctiques françaises" },
{ "index": 78, "name": "Gabon" },
{ "index": 79, "name": "Gambie" },
{ "index": 80, "name": "Géorgie" },
{ "index": 81, "name": "Allemagne" },
{ "index": 82, "name": "Ghana" },
{ "index": 83, "name": "Gibraltar" },
{ "index": 84, "name": "Grèce" },
{ "index": 85, "name": "Groenland" },
{ "index": 86, "name": "Grenade" },
{ "index": 87, "name": "Guadeloupe" },
{ "index": 88, "name": "Guam" },
{ "index": 89, "name": "Guatemala" },
{ "index": 90, "name": "Guernesey" },
{ "index": 91, "name": "Guinée" },
{ "index": 92, "name": "Guinée-Bissau" },
{ "index": 93, "name": "Guyana" },
{ "index": 94, "name": "Haïti" },
{ "index": 95, "name": "Îles Heard-et-MacDonald" },
{ "index": 96, "name": "Saint-Siège" },
{ "index": 97, "name": "Honduras" },
{ "index": 98, "name": "Hong Kong" },
{ "index": 99, "name": "Hongrie" },
{ "index": 100, "name": "Islande" },
{ "index": 101, "name": "Inde" },
{ "index": 102, "name": "Indonésie" },
{ "index": 103, "name": "Iran" },
{ "index": 104, "name": "Irak" },
{ "index": 105, "name": "Irlande" },
{ "index": 106, "name": "Île de Man" },
{ "index": 107, "name": "Israël" },
{ "index": 108, "name": "Italie" },
{ "index": 109, "name": "Jamaïque" },
{ "index": 110, "name": "Japon" },
{ "index": 111, "name": "Jersey" },
{ "index": 112, "name": "Jordanie" },
{ "index": 113, "name": "Kazakhstan" },
{ "index": 114, "name": "Kenya" },
{ "index": 115, "name": "Kiribati" },
{ "index": 116, "name": "Corée du Nord" },
{ "index": 117, "name": "Corée du Sud" },
{ "index": 118, "name": "Koweït" },
{ "index": 119, "name": "Kirghizistan" },
{ "index": 120, "name": "Laos" },
{ "index": 121, "name": "Lettonie" },
{ "index": 122, "name": "Liban" },
{ "index": 123, "name": "Lesotho" },
{ "index": 124, "name": "Libéria" },
{ "index": 125, "name": "Libye" },
{ "index": 126, "name": "Liechtenstein" },
{ "index": 127, "name": "Lituanie" },
{ "index": 128, "name": "Luxembourg" },
{ "index": 129, "name": "Macao" },
{ "index": 130, "name": "Macédoine du Nord" },
{ "index": 131, "name": "Madagascar" },
{ "index": 132, "name": "Malawi" },
{ "index": 133, "name": "Malaisie" },
{ "index": 134, "name": "Maldives" },
{ "index": 135, "name": "Mali" },
{ "index": 136, "name": "Malte" },
{ "index": 137, "name": "Îles Marshall" },
{ "index": 138, "name": "Martinique" },
{ "index": 139, "name": "Mauritanie" },
{ "index": 140, "name": "Maurice" },
{ "index": 141, "name": "Mayotte" },
{ "index": 142, "name": "Mexique" },
{ "index": 143, "name": "Micronésie" },
{ "index": 144, "name": "Moldavie" },
{ "index": 145, "name": "Monaco" },
{ "index": 146, "name": "Mongolie" },
{ "index": 147, "name": "Monténégro" },
{ "index": 148, "name": "Montserrat" },
{ "index": 149, "name": "Maroc" },
{ "index": 150, "name": "Mozambique" },
{ "index": 151, "name": "Myanmar" },
{ "index": 152, "name": "Namibie" },
{ "index": 153, "name": "Nauru" },
{ "index": 154, "name": "Népal" },
{ "index": 155, "name": "name-Bas" },
{ "index": 156, "name": "Nouvelle-Calédonie" },
{ "index": 157, "name": "Nouvelle-Zélande" },
{ "index": 158, "name": "Nicaragua" },
{ "index": 159, "name": "Niger" },
{ "index": 160, "name": "Nigeria" },
{ "index": 161, "name": "Niue" },
{ "index": 162, "name": "Île Norfolk" },
{ "index": 163, "name": "Îles Mariannes du Nord" },
{ "index": 164, "name": "Norvège" },
{ "index": 165, "name": "Oman" },
{ "index": 166, "name": "Pakistan" },
{ "index": 167, "name": "Palaos" },
{ "index": 168, "name": "Palestine" },
{ "index": 169, "name": "Panama" },
{ "index": 170, "name": "Papouasie-Nouvelle-Guinée" },
{ "index": 171, "name": "Paraguay" },
{ "index": 172, "name": "Pérou" },
{ "index": 173, "name": "Philippines" },
{ "index": 174, "name": "Îles Pitcairn" },
{ "index": 175, "name": "Pologne" },
{ "index": 176, "name": "Portugal" },
{ "index": 177, "name": "Porto Rico" },
{ "index": 178, "name": "Qatar" },
{ "index": 179, "name": "La Réunion" },
{ "index": 180, "name": "Roumanie" },
{ "index": 181, "name": "Russie" },
{ "index": 182, "name": "Rwanda" },
{ "index": 183, "name": "Saint-Barthélemy" },
{ "index": 184, "name": "Sainte-Hélène" },
{ "index": 185, "name": "Saint-Christophe-et-Niévès" },
{ "index": 186, "name": "Sainte-Lucie" },
{ "index": 187, "name": "Saint-Martin" },
{ "index": 188, "name": "Saint-Pierre-et-Miquelon" },
{ "index": 189, "name": "Saint-Vincent-et-les-Grenadines" },
{ "index": 190, "name": "Samoa" },
{ "index": 191, "name": "Saint-Marin" },
{ "index": 192, "name": "Sao Tomé-et-Principe" },
{ "index": 193, "name": "Arabie saoudite" },
{ "index": 194, "name": "Sénégal" },
{ "index": 195, "name": "Serbie" },
{ "index": 196, "name": "Seychelles" },
{ "index": 197, "name": "Sierra Leone" },
{ "index": 198, "name": "Singapour" },
{ "index": 199, "name": "Sint Maarten" },
{ "index": 200, "name": "Slovaquie" },
{ "index": 201, "name": "Slovénie" },
{ "index": 202, "name": "Îles Salomon" },
{ "index": 203, "name": "Somalie" },
{ "index": 204, "name": "Afrique du Sud" },
{ "index": 205, "name": "Géorgie du Sud-et-les Îles Sandwich du Sud" },
{ "index": 206, "name": "Soudan du Sud" },
{ "index": 207, "name": "Espagne" },
{ "index": 208, "name": "Sri Lanka" },
{ "index": 209, "name": "Soudan" },
{ "index": 210, "name": "Suriname" },
{ "index": 211, "name": "Svalbard et Jan Mayen" },
{ "index": 212, "name": "Eswatini" },
{ "index": 213, "name": "Suède" },
{ "index": 214, "name": "Suisse" },
{ "index": 215, "name": "Syrie" },
{ "index": 216, "name": "Taïwan" },
{ "index": 217, "name": "Tadjikistan" },
{ "index": 218, "name": "Tanzanie" },
{ "index": 219, "name": "Thaïlande" },
{ "index": 220, "name": "Timor oriental" },
{ "index": 221, "name": "Togo" },
{ "index": 222, "name": "Tokelau" },
{ "index": 223, "name": "Tonga" },
{ "index": 224, "name": "Trinité-et-Tobago" },
{ "index": 225, "name": "Tunisie" },
{ "index": 226, "name": "Turquie" },
{ "index": 227, "name": "Turkménistan" },
{ "index": 228, "name": "Îles Turques-et-Caïques" },
{ "index": 229, "name": "Tuvalu" },
{ "index": 230, "name": "Ouganda" },
{ "index": 231, "name": "Ukraine" },
{ "index": 232, "name": "Émirats arabes unis" },
{ "index": 233, "name": "Royaume-Uni" },
{ "index": 234, "name": "États-Unis" },
{ "index": 235, "name": "Uruguay" },
{ "index": 236, "name": "Ouzbékistan" },
{ "index": 237, "name": "Vanuatu" },
{ "index": 238, "name": "Venezuela" },
{ "index": 239, "name": "Viêt Nam" },
{ "index": 240, "name": "Îles Vierges britanniques" },
{ "index": 241, "name": "Îles Vierges des États-Unis" },
{ "index": 242, "name": "Sahara occidental" },
{ "index": 243, "name": "Yémen" },
{ "index": 244, "name": "Zambie" },
{ "index": 245, "name": "Zimbabwe" }
]
function search(input){
// Exemple : n'affiche rien quand la saisie est vide
if (input.length < 1) { return []; }
// Exemple : affiche le message d'erreur
if (input == "error") { return ["error"]; }
// Exemple : affiche le loader
if (input == "loading") { loading(); }
// Récupère les résultats
const resultats = countries.filter(country => {
return country.name.toLowerCase().startsWith(input.toLowerCase());
});
// Affiche la liste des pays ou un message customisé quand aucun résultat n'est disponible
if (resultats.length) return resultats; else return ["empty"];
}
document.addEventListener("DOMContentLoaded", function (event) {
const autocompleteInputs = document.querySelectorAll('ft-autocomplete');
autocompleteInputs.forEach(el => {
el.searchCallback = search;
});
});