Skip navigation

untitled-2

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.🙂

One Comment

  1. kug contoh aplikasix ga di upload gan…bisa minta contohnya yg jadiga gan…please buat belajar nich.. email ke sini ya gan.. diztyisty@gmail.com..trimakasih gan sebelumnya ane tunggu ya..^_^


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: