Merci Papy JP, j'ai eu cette idée également, en effet sur serveur cela fonctionne sur tous les navigateurs.
Les choses se compliquent à présent, car je souhaiterai que selon mon choix dans un menu déroulant avec suggestion, le résultat approprié s'affiche sous le champ dans la zone de résultat matérialisé (plusieurs jours de recherche sur ce sujet précis ne m'ont pas permis de trouver la solution) actuellement mon fichier "resultat.txt" à la racine du dossier n'est pas appelé, un tuto précis sur le sujet serait d'une grande aide !!
version test ici :
http://me77.fr/TNS/AJAX/TEST.html
<!doctype html>
<html>
<head>
<title>Seine-et-Marne-environnement.fr</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #fff;}
.ExternalClass {width: 100%; background-color: #fff;}
</style>
<body>
<form autocomplete="off" >
<div class="autocomplete" style="width:277px;"><input id="myInput" type="text" name="maCommune" placeholder="Commune"></div>
<input type="submit" value="Valider" onclick="loadDoc()">
</form>
<div id="resultat" style="color: black">ZONE DE RESULTATS</font></div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("resultat").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "resultat.txt", true);
xhttp.send();
}
function autocomplete(inp, arr) {
var currentFocus;
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
this.parentNode.appendChild(a);
for (i = 0; i < arr.length; i++) {
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
b = document.createElement("DIV");
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
b.addEventListener("click", function(e) {
inp.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
});
a.appendChild(b);
}
}
});
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) {
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
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]);
}
}
}
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
var communes = ["Achères-la-Forêt","Amillis","Amponville","Andrezel","Annet-sur-Marne","Arbonne-la-Forêt","Argentières","Armentières-en-Brie","Arville","Aubepierre-Ozouer-le-Repos","Aufferville","Augers-en-Brie","Aulnoy","Avon","Baby","Bagneaux-sur-Loing","Bailly-Romainvilliers","Balloy"
];
autocomplete(document.getElementById("myInput"), communes);
</script>
</body>
</html>