Liste à saisie semi-automatique

HTML

<!-- Liste prédictive -->
<form autocomplete="off">
<label for="predictiveList">Ville ou communauté</label>
<span class="autocomplete"><input name="myCommunity" id="predictiveList" type="text" placeholder="Tapez pour rechercher..."></span>
</form>

<!-- Javascript de base pour la liste prédictive. Placez juste avant la fermeture de la balise body en bas de votre page -->
<script>
function autocomplete(inp, arr) {
/*la fonction autocomplete prend deux arguments,
l'élément champ de texte et un tableau de valeurs possibles autocomplétées :*/
var currentFocus;
/*exécutez une fonction lorsque quelqu'un écrit dans le champ de texte :*/
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/*fermez toutes les listes déjà ouvertes de valeurs autocomplétées*/
closeAllLists();
if (!val) { return false; }
currentFocus = -1;
/*créez un élément UL qui contiendra les éléments (valeurs) :*/
a = document.createElement("ul");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*ajoutez l'élément comme enfant du conteneur d'autocomplétion :*/
this.parentNode.appendChild(a);
/*pour chaque élément du tableau...*/
for (i = 0; i < arr.length; i++) {
/*vérifiez si l'élément commence par les mêmes lettres que la valeur du champ de texte :*/
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
	/*créez un élément LI pour chaque élément correspondant :*/
	b = document.createElement("li");
	/*rendez les lettres correspondantes en gras :*/
	b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
	b.innerHTML += arr[i].substr(val.length);
	/*insérez un champ de saisie qui contiendra la valeur de l'élément du tableau courant :*/
	b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
	/*exécutez une fonction lorsque quelqu'un clique sur la valeur de l'élément (élément LI) :*/
	b.addEventListener("click", function(e) {
		/*insérez la valeur pour le champ de texte d'autocomplétion :*/
		inp.value = this.getElementsByTagName("input")[0].value;
		/*fermez la liste des valeurs autocomplétées,
		(ou toute autre liste ouverte de valeurs autocomplétées) :*/
		closeAllLists();
	});
	a.appendChild(b);
}
}
});
/*exécutez une fonction lorsqu'une touche est pressée sur le clavier :*/
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("ul");
if (e.keyCode == 40) {
/*Si la touche flèche BAS est pressée,
augmentez la variable currentFocus :*/
currentFocus++;
/*et rendez l'élément courant plus visible :*/
addActive(x);
} else if (e.keyCode == 38) { //haut
/*Si la touche flèche HAUT est pressée,
diminuez la variable currentFocus :*/
currentFocus--;
/*et rendez l'élément courant plus visible :*/
addActive(x);
} else if (e.keyCode == 13) {
/*Si la touche ENTRÉE est pressée, empêchez le formulaire d'être soumis,*/
e.preventDefault();
if (currentFocus > -1) {
	/*et simulez un clic sur l'élément "actif" :*/
	if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*une fonction pour classer un élément comme "actif" :*/
if (!x) return false;
/*commencez par retirer la classe "active" sur tous les éléments :*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*ajoutez la classe "autocomplete-active" :*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*une fonction pour retirer la classe "active" de tous les éléments d'autocomplétion :*/
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*fermez toutes les listes d'autocomplétion dans le document,
sauf celle passée en argument :*/
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]);
}
}
}
/*exécutez une fonction lorsque quelqu'un clique dans le document :*/
document.addEventListener("click", function(e) {
closeAllLists(e.target);
});
}

/*Un tableau contenant toutes les communautés au Nouveau-Brunswick :*/
var communities = ["Alma", "Aroostook", "Atholville", "Baker Brook", "Balmoral", "Bas-Caraquet", "Bath", "Bathurst", "Bathurst", "Belledune", "Beresford", "Bertrand", "Blacks Harbour", "Blackville", "Bouctouche", "Bristol", "Cambridge-Narrows", "Campbellton", "Campbellton", "Campbellton", "Canterbury", "Cap-Pelé", "Caraquet", "Centreville", "Charlo", "Chipman", "Clair", "Dalhousie", "Dieppe", "Doaktown", "Dorchester", "Drummond", "Edmundston", "Edmundston", "Eel River Crossing", "Florenceville", "Florenceville-Bristol", "Fredericton", "Fredericton Junction", "Gagetown", "Grand Bay-Westfield", "Grand Falls / Grand-Sault", "Grand Manan", "Grande-Anse", "Hampton", "Hartland", "Harvey", "Hillsborough", "Kedgwick", "Lac Baker", "Lamèque", "Le Goulet", "Maisonnette", "McAdam", "Meductic", "Memramcook", "Millville", "Minto", "Miramichi", "Miramichi", "Moncton", "Moncton", "Nackawic", "Neguac", "New Maryland", "Nigadoo", "Norton", "Oromocto", "Paquetville", "Perth-Andover", "Petit Rocher", "Petitcodiac", "Plaster Rock", "Pointe-Verte", "Port Elgin", "Quispamsis", "Rexton", "Richibucto", "Riverside-Albert", "Riverview", "Rivière-Verte", "Rogersville", "Rothesay", "Sackville", "Saint Andrews", "Saint John", "Saint-Antoine", "Saint-François de Madawaska", "Saint-Isidore", "Saint-Louis de Kent", "Saint-Léolin", "Saint-Léonard", "Saint-Quentin", "Sainte-Anne-de-Madawaska", "Sainte-Marie - Saint-Raphaèl", "Salisbury", "Shediac", "Shippagan", "St. André", "St. George", "St. Hilaire", "St. Leonard", "St. Martins", "St. Stephen", "Stanley", "Sussex", "Sussex Corner", "Tide Head", "Tracadie-Sheila", "Tracy", "Woodstock"]
autocomplete(document.getElementById("predictiveList"), communities);
</script>