Input Suggest Mirip Facebook
Pengantar
Pada awalnya saya ingin membuat input yang dapat memberikan bantuan mirip google suggest sehingga saat saya memasukkan satu huruf maka akan muncul dropdown berisi data yang mirip dengan input yang saya masukkan. Setelah mencoba mencari kode javascript (biasanya memang fasilitas seperti ini dikerjakan oleh javascript) di google, saya menemukan beberapa kode tapi bagi saya terlalu panjang dan tidak sesuai dengan keinginan. Apalagi setelah saya melihat sebuah situs yang membahas tentang dropdown mirip Facebook, akhirnya saya coba buat sendiri sesuai dengan keinginan saya :). Saya menggunakan Ajax karena pengetahuan saya tentang javascript agak payah :), jadi kodenya saya lempar ke PHP agar fungsi pencocokan string dilakukan oleh PHP dan kedepannya mungkin bisa menggunakan data dari database untuk menampilkan suggest-nya. Oh iya, ini screenshot hasilnya:
File yang dibutuhkan
Disini saya membutuhkan tiga file yaitu file "test.php", "tests.php" dan "httpconn.js". File pertama adalah tampilan yang kita lihat, file kedua adalah file php yang menghandle request dari ajax sedangkan file ketiga adalah file koneksi ajax. Untuk file ketiga, nanti bisa dimasukkan ke file pertama menggunakan tag ". Jika anda menginginkan source yang berisi tiga file tersebut, anda dapat melihat disini: source
Memulai Coding
Saya akan tampilkan dulu file yang pertama dimana berisi input yang akan dimodifikasi. File ini hanya berisi HTML dan javascript. Ini isinya:
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tes Saja</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./httpconn.js"></script>
<style type="text/css">
#formtest {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 0.8em;
}
#formtest .text {
width: 215px; height: 20px; border: 1px solid #979797; display: block;
position: relative;
}
#suggest {
width: 215px; min-height: 25px; overflow: visible; border: 1px solid #D7D7D7;
position: absolute; display: none; opacity: 0.9; z-index: 999;
background-color: #EFEFEF; color: #180909;
}
#suggest a {
text-decoration: none; line-height: 1.5em;
}
ul#fbList {
width: 100%; margin: 0; padding: 0; float: left; list-style: none;
}
ul#fbList li {
width: 100%; margin: 0; padding: 4px 0px; float: left;
clear: both; border-bottom: 1px solid #D7D7D7; text-align: left; text-indent: 7px;
}
ul#fbList li a {
width: 100%; margin: 0; padding: 0; float: left; display: block; color: #180909;
}
ul#fbList li.first { background-color: #5072AC; }
ul#fbList li.first a { color: #FFF; }
ul#fbList li.last { border: 0; }
ul#fbList li a strong { background-color: #ACACAC; }
ul#fbList li.first a strong { background-color: transparent; }
</style>
<script type="text/javascript">
// [CDATA[
function showSuggest(id,ids) {
input = getObject(ids); output = getObject(id);
textId = input.value;
ReplaceElementID('tests.php?tes=',id,textId);
if(input.value == '') {
output.style.display = 'none';
} else {
output.style.display = 'block';
}
}
function getObject(id) {
return document.getElementById(id);
}
function putValue(id,ids,text) {
input = getObject(id); input.value = text;
output = getObject(ids); output.style.display = 'none';
}
document.onclick = function (e) {
e = e || window.event
var target = e.target || e.srcElement
var box = document.getElementById("suggest")
do {
if (box == target) {
// Click occured inside the box, do nothing.
//return
}
target = target.parentNode
} while (target)
// Click was outside the box, hide it.
box.style.display = "none"
}
// ]]>
</script>
</head>
<body>
<form id="formtest">
Nama Teman:<input type="text" size="10" maxlength="23" id="textId" class="text"
onkeyup = "showSuggest('suggest','textId')" autocomplete="off" />
<div id="suggest"></div>
<hr />
Silakan masukkan nama teman anda untuk mengirim undangan melalui email.
</form>
</body>
</html>
Ehm, kita bahas dulu isi file pertama ini. Anda lihat dibagian "head", disitu kita memasukkan file external "httpconn.js", terus ada kode css untuk mengatur tampilan dropdown kita nantinya. Div dengan id "suggest" adalah div yang akan menampilkan data. Setelah itu ada beberapa kode javascript yang akan melakukan request Ajax serta mengatur tampilan dropdown kita nanti seperti menyembunyikan div "suggest" jika link diklik, dsb. Untuk fungsi terakhir, saya dapat nyontek dari internet :) (kelihatan dari comment-nya pakai bahasa Inggris). Lalu di bagian "body", disitu ditampilkan form yang berisi input dengan id="textId" beserta properti "onkeyup" untuk mengirim request dengan Ajax. Ada bagian "autocomplete=off", yang berguna untuk mencegah browser menyimpan data isian sebelumnya. Bagian ini tidak valid menurut W3C tapi biarlah :), asalkan jangan divalidasi, gak masalah.
Sekarang akan kita bahas file kedua yaitu "tests.php" yang berisi kode PHP untuk menghandle request dengan Ajax. Ini isinya:
PHP
$tes = $_GET['tes'];
$data = array('Amir Syaiffudin','Siti Umiyati','Ahmad Syarifuddin','Emilia Contessa',
'Dini Anggita','Jono Purnomo','Gunawan Wibisono','Petty Sukemi',
'Janoko Amudya','Samsul Arifin','Anang Makruf');
$arrResult = array();
for($x = 0; $x < count($data); $x++) {
if(@stripos($data[$x],$tes) !== false) {
$pattern = "/($tes)/i"; $replacement = '\\1';
$formatted = preg_replace($pattern,$replacement,$data[$x]);
$arrResult[] = array($data[$x],$formatted);
}
}
echo "\"
fbList\">";
if(count($arrResult) == 0) {
echo 'textId\',\'suggest\',\'\')">Tidak ada ';
} else {
for($x =0; $x <count($arrResult); $x++) {
if($x == 0) {
$row = ' class="first"';
} else {
if($x == count($arrResult) - 1) {
$row = ' class="last"';
} else {
$row = '';
}
}
echo '.$row.'>textId\',\'suggest\',\''.$arrResult[$x][0].'\')">'.$arrResult[$x][1].'';
}
}
echo "";
?>
Seperti yang anda lihat, saya memiliki array yang berisi nama orang yang ingin kita masukkan pada dropdown. Mungkin nanti data array ini bisa berasal dari database. Sebenarnya yang ditampilkan bukan dropdown biasa yang menggunakan tag "select" tapi saya menggunakan "ul" atau list yang berisi link. Link ini akan mengaktifkan fungsi "putValue" saat diklik dengan memberi properti "onclick".
Penutup
Kode yang saya gunakan adalah kode "versi saya", jadi mungkin saja ada "bug" yang belum saya ketahui. Anda dapat memodifikasi sesuka anda, misalkan dengan menggunakan database sebagai hasil request ajax-nya. Terima kasih