PHP.AJAX
AUTOCOMPLETE DENGAN
AJAX
Ikhwan Anshori
Auto complete atau sering juga
disebut Auto suggest adalah metode pemrograman untuk membuat praktis dalam
melakukan sebuah pencarian. Dengan menggunakan auto complete kita tidak harus mengingat
seluruh keyword yang akan kita cari. Dengan demikian proses pencarian akan
lebih cepat dilakukan.
Untuk membuat sebuah auto complete
bisa menggunakan beberapa bahasa pemrograman misalnya AJAX dan yang lainya. Nah
kali ini yang akan digunakan adalah ajax auto complete. Beberapa kebutuhan yang
akan digunakan dalam membuat autocomplete ini antara lain :
1. Database (coba)
a.
Tabel
(barang)
Struktur
tabel barang sebagai berikut :
2.
File
PHP meliputi :
a.
Search.html
b.
Search.php
3.
CSS
file (style.css)
Kebutuhan
dari pembuatan Ajax Auto Complete ini telah didapat, kemudian untuk pertama
kita buat databasenya berikut tabel beserta recordnya dengan SQL berikut :
-- buat database dengan nama coba --
create DATABASE `coba`;
-- gunakan database coba --
use
`coba`;
--
-- Table structure for table `barang`
--
CREATE TABLE IF NOT EXISTS `barang` (
`id` int(5) NOT NULL AUTO_INCREMENT,
`nama` varchar(20) NOT NULL,
`stock` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=19 ;
--
-- Dumping data for table `barang`
--
INSERT INTO `barang` (`id`, `nama`, `stock`) VALUES
(1, 'Baju', 405),
(2, 'Celana', 1),
(3, 'Kemeja', 4),
(4, 'a', 1),
(5, 'b', 2),
(6, 'c', 3),
(7, 'd', 4),
(8, 'e', 5),
(9, 'f', 7),
(10, 'g', 8),
(11, 'h', 9),
(12, 'i', 10),
(13, 'j', 11),
(14, 'aaa', 21),
(15, 'aaaaa', 22),
(16, 'aasaas', 23),
(17, 'adasa', 24),
(18, 'asadasa', 25);
SQL diatas
digunakan untuk membuat database dengan nama coba. Kemudian didalam database coba kita buat tabel dengan nama
barang, lalu kita masukan record untuk percobaan seperti pada script diatas.
Jika SQL
sudah dieksekusi maka tabel yang akan terlihat seperti berikut (beserta record):
Kemudian
untuk file – file proses :
1.
Search.html
<html>
<head>
<title>AJAX AUTO COMPLETE</title>
<link rel='stylesheet' type='text/css' href='style.css' />
<script language='JavaScript'>
var ajaxRequest;
function getAjax() //fungsi untuk mengecek
AJAX pada browser
{
try
{
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser
broke!");
return false;
}
}
}
}
function autoComplete() //fungsi menangkap input
search dan menampilkan hasil search
{
getAjax();
input = document.getElementById('inputan').value;
if (input == "")
{
document.getElementById("hasil").innerHTML = "";
}
else
{
ajaxRequest.open("GET","search.php?input="+input);
ajaxRequest.onreadystatechange = function()
{
document.getElementById("hasil").innerHTML = ajaxRequest.responseText;
}
ajaxRequest.send(null);
}
}
function autoInsert(nama) //fungsi mengisi input
text dengan hasil pencarian yang dipilih
{
document.getElementById('inputan').value = nama;
document.getElementById('hasil').innerHTML = "";
}
</script>
</head>
<body>
<div id='outer'>
Nama Barang : <hr/><input type='text' onkeyup="autoComplete();" id='inputan' placeholder='cari disini'>
<div id='hasil'></div> <!– menampilkan hasil
search –>
</div>
</body>
</html>
Penjelasan :
function getAjax() //fungsi untuk mengecek
AJAX pada browser
{
try
{
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser
broke!");
return false;
}
}
}
}
Script diatas digunakan untuk cek AJAX pada browser.
Sebab versi browser berbeda, cek ini penting dilakukan untuk memastikan ajax
dapat bekerja di browser dengan baik.
function autoComplete() //fungsi menangkap input
search dan menampilkan hasil search
{
getAjax();
input = document.getElementById('inputan').value;
if (input == "")
{
document.getElementById("hasil").innerHTML = "";
}
else
{
ajaxRequest.open("GET","search.php?input="+input);
ajaxRequest.onreadystatechange = function()
{
document.getElementById("hasil").innerHTML = ajaxRequest.responseText;
}
ajaxRequest.send(null);
}
}
Untuk script diatas secara ringkas maksudnya adalah
ketika user menuliskan huruf pada input field, maka event onkeyup akan mendeteksi input tersebut dan secara stimulan
mengirimkanya ke fungsi auto complete ini (function
autoComplete). Di dalam fungsi ini masih terdapat beberapa filter, yakni
ketika tidak ada satupun karakter ditulis namun kolom input dalam keadaan aktif
maka ajax tidak akan melakukan request ke search.php, sebaliknya jika terdapat
karakter yang dituliskan ke kolom input, fungsi ini akan melakukan request
kepada file search.php dengan membawa parameter (keyword) yang diketik oleh user.
function autoInsert(nama) //fungsi mengisi input
text dengan hasil pencarian yang dipilih
{
document.getElementById('inputan').value = nama;
document.getElementById('hasil').innerHTML = "";
}
Setelah pencarian selesai dilakukan maka record yang
didapat dari keyword akan ditampilkan, ketika user memilih suggest yang
diberikan oleh ajax maka fungsi ini yang akan menangani input tersebut. Ketika
event klik pada list suggest dilakukan oleh user,maka secara otomatis fungsi
ini membaca apa yang dipilih oleh user dan memasukannya ke kolom input.
input type='text' onkeyup="autoComplete();" id='inputan' placeholder='cari disini'>
Input diatas digunakan untuk
memasukan keyword. Sementara atribut onkeyup
digunakan untuk mendeteksi penulisan di dalam kolom input.
<div id='hasil'></div> <!– menampilkan hasil
search –>
Setelah
pencarian berhasil dilakukan kemudian data dikembalikan lagi ke file
search.html dan hasil pencarian diletakan di tag div yang mempunyai identitas hasil.
2.
Search.php
<html>
<head>
<link rel='stylesheet' type='text/css' href='style.css' />
</head>
<body>
<?php
mysql_connect("localhost","root",""); /* koneksi */
mysql_select_db("coba"); /* MySQL */
if (isset($_GET['input']))
{
$input = $_GET['input'];
$query = mysql_query("SELECT * FROM
barang WHERE nama LIKE '%$input%'");
//query
mencari hasil search
$hasil = mysql_num_rows($query);
if ($hasil !=0)
{
echo"<ul
class='auto'>";
while ($data = mysql_fetch_array($query))
{
?>
<a href="javascript:autoInsert('<?php echo"$data[1]"; ?>');">
<li>
<?php echo"$data[0]. $data[1] stok $data[2]"; ?>
</li>
</a>
<?php
}
echo"</ul>";
}
else
{
echo "Data tidak
ditemukan";
}
}
else if(isset($_GET['id']))
{
$id = $_GET['id'];
$query = mysql_query("SELECT * FROM
barang WHERE id='$id'");
$info = mysql_fetch_row($query);
echo "ID : ".$info[0]."<BR>Nama :
".$info[1]."<BR>Stock :
".$info[2];
}
?>
</body>
</html>
Penjelasan :
mysql_connect("localhost","root",""); /* koneksi */
mysql_select_db("coba"); /* MySQL */
Script diatas
digunakan untuk koneksi ke localhost MySQL.
$input = $_GET['input'];
$query = mysql_query("SELECT * FROM
barang WHERE nama LIKE '%$input%'");
//query
mencari hasil search
Setelah keyword
didapatkan dari request ajax dengan menggunakan metode get kemudian diambil ($_GET[‘input’]) dan dilakukan query
select untuk mencari record yang mempunyai kandungan keyword tersebut
didalamnya.
$hasil = mysql_num_rows($query);
if ($hasil !=0)
Kemudian dilakukan
penghitungan terhadap record yang didapat, jika ternyata record yang dihitung
adalah nol (0) atau tidak ditemukan record berdasarkan keyword yang dicari maka
akan mucul pesan
echo "Data tidak
ditemukan";
Atau sebaliknya jika memang terdapat
record yang dicari maka lakukan baris berikut :
else if(isset($_GET['id']))
{
$id = $_GET['id'];
$query = mysql_query("SELECT * FROM
barang WHERE id='$id'");
$info = mysql_fetch_row($query);
echo "ID : ".$info[0]."<BR>Nama :
".$info[1]."<BR>Stock :
".$info[2];
}
Pada script diatas dapat ditebak
bahwa yang akan ditampilkan adalah field 0,1,2 (id,nama,stock).
3.
Style.css
/*
style.css
digunakan untuk tampilan
*/
body,html{margin: 0px;font-family: tahoma,arial,helvetica;font-size: 11px;color: #191919;padding: 10px;}
#outer{width: 300px;height: auto;overflow: hidden;margin: 5px;border: 0.1em solid #edd897;padding: 5px;background: #f3efe5;
-moz-box-shadow: 0px 0px 4px 4px #555;-webkit-box-shadow: 0px 0px 4px 4px #555;-khtml-box-shadow:
0px 0px 4px 4px #555;box-shadow: 0px 0px 3px 2px #bbb;
}
input{width: 200px;height: 30px;border: 0.1em solid #edd897;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
ul.auto{width: 100%;height: auto;overflow: hidden;display: inline;margin: 0px;padding: 0px;}
ul.auto li{width: 100%;height: 22px;border-bottom: 0.1em solid #edd897;background: #f4f4f4;padding: 8px 0px 0px 5px;}
ul.auto li:hover{background: #e9e9e9;}
a{text-decoration: none;color: #2f8eee;}
CSS diatas digunakan untuk
memperindah tampilan pencarian di halaman search.html yang telah dibuat tadi.
Dan hasil pembuatan ajax auto complete sebagai berikut :
Demikian artikel yang dapat saya
bagikan, jika sekiranya dibutuhkan silakan di-copy, jika ingin dibagikan
silakan cantumkan alamat sumber. Terima kasih saran yang membangun sangat
penulis harapkan demi perbaikan artikel ini ke depanya. Terima kasih.
Yogyakarta, 8 Oktober 2013
Ikhwan Anshori
