Berikut ini adalah panduan membuat autocompletion sederhana dengan javascript tanpa menggunakan prototype. Kenapa tidak menggunakan prototype? ya jelas, biar ringan. Lagian juga tanpa prototype pun sudah bisa berjalan dengan baik.

Pada kasus ini adalah autocompletion pada input Nama. Nama yang dikomparasikan pada autocompletion ini didapat dari variabel php. Jadi  autocompletion ini tidak menggunakan AJAX sama sekali, karena data yang dikomparasi sudah di-load pada saat page di load (didapat dari var PHPnya). Jadinya lebih ringan.

Pertama, siapkan HTMLnya :

<? $nama_list = array (‘ani’, ‘adi’, ‘budianto’, ‘dian’, ‘anton’, ‘dina’);?>

<input type=”text” id=”nama” onkeyup=”getrespon(event)” autocomplete=”off” />
<div class=”suggestion”>
<ul id=”ul-cont” onclick=”click(this)”>
<span id=”j” style=”display:none”></span>

<span id=”sugg”>
<li id=”li-1″ class=”selected”>a</li>
<li id=”li-2″ class=”">b</li>
<li id=”li-3″ class=”">c</li>
<li id=”li-4″ class=”">d</li>
</span>
</ul>
</div>

…

Kemudian script Javascriptnya :

<script>
/* AUTO COMPLETION  */

var count = <? echo count($nama_list); ?>;
var nama_list= new Array();
nama_list[0]= ‘<? echo current($nama_list); ?>’;
<?for ($i=1;$i<count($nama_list);$i++) {?>
nama_list[<?echo $i;?>]= ‘<? echo next($nama_list); ?>’;
<?}?>

function strpos( haystack, needle, offset){
var i = (haystack+”).indexOf( needle, offset );
return i===-1 ? false : true;
}

function getrespon(e) {
var i,j,len,hov;

if(e.keyCode == 40){ //panah ke bawah
len=document.getElementById(‘j’).innerHTML;
for(i=1;i<len;i++)
if (document.getElementById(‘li-’+i).className==’selected’) {
document.getElementById(‘li-’+i).className=”;
document.getElementById(‘li-’+(i+1)).className=’selected’;
hov=true;
break;
}
if (document.getElementById(‘li-’+len).className==’selected’) hov=true;
if (!(hov)) document.getElementById(‘li-’+1).className=’selected’
}

else if(e.keyCode == 38){ //panah ke atas
len=document.getElementById(‘j’).innerHTML;
for(i=2;i<=len;i++)
if (document.getElementById(‘li-’+i).className==’selected’) {
document.getElementById(‘li-’+i).className=”;
document.getElementById(‘li-’+(i-1)).className=’selected’;
break;
}
}

else if(e.keyCode == 13){ //enter
len=document.getElementById(‘j’).innerHTML;
for(i=1;i<=len;i++)
if (document.getElementById(‘li-’+i).className==’selected’) {
document.getElementById(‘nama’).value=document.getElementById(‘li-’+i).innerHTML;
document.getElementById(‘ul-cont’).style.display=’none’;
break;
}
}
else {
//update suggestion
var sugg = ”;
var str=document.getElementById(‘nama’).value;
j=0;
for(i=0;i<count;i++) {
if (strpos(nama_list[i], str))
{
j++;
sugg = sugg + ‘<li id=li-’+(j)+’ onmouseover=hover(this) class=  )>’+nama_list[i]+’</li>’
if     (j>=10) break;
}
}
//alert(strpos(‘ani’, ‘ad’));
//alert(str + ‘:’+sugg);
//view suggestion has been updated
document.getElementById(‘j’).innerHTML = j;
document.getElementById(’sugg’).innerHTML = sugg;

if (j>0) {
for(i=1;i<=j;i++)
document.getElementById(‘li-’+i).className=”;
}
document.getElementById(‘ul-cont’).style.display=’block’;
}
}

function hover(el) {
len=document.getElementById(‘j’).innerHTML;
for(i=1;i<=len;i++)
if (document.getElementById(‘li-’+i).className==’selected’) {
document.getElementById(‘li-’+i).className=”;
break;
}
el.className = ’selected’;
}

function click(el) {
len=document.getElementById(‘j’).innerHTML;
for(i=1;i<=len;i++)
if (document.getElementById(‘li-’+i).className==’selected’) {
document.getElementById(‘nama’).value=document.getElementById(‘li-’+i).innerHTML;
document.getElementById(‘ul-cont’).style.display=’none’;
break;
}
}

</script>

Dan script CSSnya:

<style>
.suggestion ul    {width:100px;padding:0px;margin:0px;position:absolute;border:1px solid #CCC;border-top:0px;display:none;}
.suggestion ul li {list-style:none;margin:0px;}
.suggestion ul li.selected {background:#EEEEEE;}

</style>

Script2 di atas bisa digabung dalam 1 file dan langsung jalan. Silahkan mencoba.