Membuat Autocompleter Nama Sekolah dengan Scriptaculous dan ASP
PMB sudah dimulai. Siap-siap disibukan dengan pengentrian data calon mahasiswa.
Terdapat beberapa kekurangan yang ada pada aplikasi entri data calon mahasiswa. Yaitu ketidaksamaan nama asal sekolah yang dientri oleh pengentri data satu dengan pengentri data yang lainnya.
Misalnya pengentri data satu memasukan SMA Negeri 1 Bandung. Pengentri data dua memasukan SMAN 1 Bandung. Dan Pengentri data tiga memasukan SMAN 1 Bdg.
Ketiga nama sekolah yang dimasukan itu sama, hanya penulisannya yang berbeda. Bagimana untuk menseragamkan nama asal sekolah tersebut?
Untuk mengatasi masalah tersebut mungkin bisa menggunakan kode asal sekolah atau menggunakan combo box list nama asal sekolah. Namun berhubung jumlah SMA yang ada di indonesia jumlahnya ribuan, sangat tidak mungkin menggunakan kode sekolah. Si pengentri data akan kesulitan menghapal kode untuk tiap sekolah.
Begitupun jika menggunakan combo box. Si pengentri data akan kesulitan dalam mencari nama sekolah yang cocok karena harus mencari satu dari ribuan daftar nama sekolah yang ada. Walaupun nama sekolah sudah di sortir, butuh waktu untuk mencarinya. Si pengentri data mengeluh lebih cepat mengetik nama sekolah daripada harus mencari dari combo box yang ada.
Autocompleter mungkin cocok untuk mengatasi masalah ini. Berikut adalah cara bagaimana menggunakan fungsi Autocompleter yang ada pada Scriptaculous.
Pertama buat sebuah direktori kerja contohnya direktori_kerja. Simpan direktori scriptaculous (ekstrak dari master scriptaculous) ke dalam direktori_kerja. Sehingga struktur direktorinya sebagai berikut.
+ direktori_kerja
-+ scriptaculous
–+ builder.js
–+ controls.js
–+ dragdrop.js
–+ effects.js
–+ prototype.js
–+ scriptaculous.js
–+ slider.js
–+ unittest.js
Buat sebuah file simpan di direktori_kerja dan beri nama form_sekolah.asp. Ketikan script dibawah ini pada file form_sekolah.asp.
<html>
<head>
<title>Contoh Autocompleter</title>
<script src=”scriptaculous/prototype.js” type=”text/javascript”></script>
<script src=”scriptaculous/scriptaculous.js” type=”text/javascript”></script>
<style type=”text/css”>
div.autocomplete {
position:absolute;
width:250px;
background-color:white;
border:1px solid #888;
margin:0px;
padding:0px;
}
div.autocomplete ul {
list-style-type:none;
margin:0px;
padding:0px;
}
div.autocomplete ul li.selected { background-color: #ffb;}
div.autocomplete ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
height:32px;
cursor:pointer;
}
</style>
</head>
<body>Asal Sekolah : <input type=”Text” id=”sekolah_asal” size=”70″>
<div id=”autocomplete_sekolah_asal” class=”autocomplete”></div>
<script>
new Ajax.Autocompleter(“sekolah_asal”, “autocomplete_sekolah_asal”, “getsekolah.asp”, {paramName: “value”, minChars: 3});
</script></body>
</html>
<script src=”scriptaculous/prototype.js” type=”text/javascript”></script>
<script src=”scriptaculous/scriptaculous.js” type=”text/javascript”></script>
2 baris tersebut berfungsi untuk memanggil javascript scriptaculous.
new Ajax.Autocompleter(“sekolah_asal“, “autocomplete_sekolah_asal“, “getsekolah.asp“, {paramName: “value“, minChars: 3});
sekolah_asal adalah id dari input text yang akan menggunakan autocompleter.
autocomlete_sekolah_asal adalah id dari div yang akan digunakan untuk menampilkan list nilai dari autocompleter.
getsekolah.asp adalah url yang akan dijalankan ketika user memasukan nilai pada input text dan hasilnya akan di tampilkan pada div autocomlete_sekolah_asal.
Opsi didalam tanda { dan } bersifat tidak wajib.
paramName: “value” adalah nama variabel yang digunakan pada file getsekolah.asp
minChars: 3 adalah jumlah minimum karakter yang harus dimasukan pada input text sebelum autocompleter memanggil url file getsekolah.asp
Langkah berikutnya buat sebuah file simpan di direktori_kerja dan beri nama getsekolah.asp. Lalu ketikan script dibawah ini pada file getsekolah.asp.
<%
set conn = server.createObject(“adodb.connection”)
conn.open “database=akademik;dsn=akademik;UID=sa;password=password;”
conn.CommandTimeout = 20
value = request.Form(“value”)
set rs = server.CreateObject(“adodb.recordset”)
str=”SELECT TOP 15 nama_sekolah, kode_pos FROM t_ref_sma WHERE nama_sekolah LIKE ‘%”& value &”%’ ORDER BY nama_sekolah”rs.open str,conn,3,3
response.write(“<ul>”)
while not rs.eof
response.write(“<li>”& rs.fields(“nama_sekolah”) &”</li>”)
rs.movenext
wend
rs.close
response.write(“</ul>”)
%>
Coba jalankan di browser dan berikut adalah hasilnya.
Referensi http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter
ok mantap juga. coba auto complete nya ahhh…
buat sedikit project nich thanks..
wah,, sulit jg ya mas