On trouve plusieurs programmes JavaScript pour l’auto-complétion, mais souvent ils sont lourds et proposent des listes déroulantes plus ou moins attrayantes.
Après quelques recherches je suis tombé sur Mo Autocomplete créé par un russe.
Une fois minifié, le code ne fait que 1423B, et son principe n’est pas d’afficher une liste sous le champ mais de compléter le mot directement dans le champ.
Ci-dessous une démo (tapez un mois de l’année en français) :
Et le code associé :
<input type="text" id="demo-autocomplete" autocomplete="array:months" />
<script>
/* autocomplete - http://momche.net/res/autocomplete/ */
var cAutocomplete={sDescription:"autcomplete class"};cAutocomplete.complete=function(hEvent){if(hEvent==null){var hEvent=window.hEvent}var hElement=(hEvent.srcElement)?hEvent.srcElement:hEvent.originalTarget;var sAA=hElement.getAttribute("autocomplete").toString();if(sAA.indexOf("array:")>=0){hArr=eval(sAA.substring(6))}else{if(sAA.indexOf("list:")>=0){hArr=sAA.substring(5).split("|")}}if(hEvent.keyCode==16){return}var sVal=hElement.value.toLowerCase();if(hEvent.keyCode==8||hEvent.keyCode==46){sVal=sVal.substring(0,sVal.length-1)}if(sVal.length<1){return}for(var nI=0;nI<hArr.length;nI++){sMonth=hArr[nI];nIdx=sMonth.toLowerCase().indexOf(sVal,0);if(nIdx==0&&sMonth.length>sVal.length){hElement.value=hArr[nI];if(hElement.createTextRange){hRange=hElement.createTextRange();hRange.findText(hArr[nI].substr(sVal.length));hRange.select()}else{hElement.setSelectionRange(sVal.length,sMonth.length)}return}}};cAutocomplete.init=function(){var a=0;var c=document.getElementsByTagName("INPUT");for(var a=0;a<c.length;a++){if(c[a].type.toLowerCase()=="text"){var b=c[a].getAttribute("autocomplete");if(b){if(document.attachEvent){c[a].attachEvent("onkeyup",cAutocomplete.complete)}else{if(document.addEventListener){c[a].addEventListener("keyup",cAutocomplete.complete,false)}}}}}};if(window.attachEvent){window.attachEvent("onload",cAutocomplete.init)}else{if(window.addEventListener){window.addEventListener("load",cAutocomplete.init,false)}};
var months=["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"];
cAutocomplete.init();
</script>