Hallo sobat mitra tekno niaga, pada tulisan kali ini Kami ingin memberikan tutorial sederhana tentang bagaimana cara membuat AutoComplete dengan jQuery. Tanpa panjang lebar lagi, Yuk mari baca dan simak tulisan ini sampai habis. Di jamin akan memberikan manfaat yang besar untuk menambah pengetahuan Anda. Oke, langsung saja ya.
Teknik AutoComplete ini berfungsi untuk menampilkan sebuah pilihan saran berbentuk text ketika Anda mengetikan sesuatu pada kolom textbox. Berikut ini adalah contoh script standar untuk membuat AutoComplete dengan jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cara Membuat AutoComplete dengan jQuery</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://repo.mitrateknoniaga.com/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="https://repo.mitrateknoniaga.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://repo.mitrateknoniaga.com/jquery-ui-1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
var data = [
"ActionScript",
"AppleScript",
"ASP",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#auto-complete").autocomplete({
source: data
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="auto-complete">Bahasa Pemrograman: </label>
<input id="auto-complete">
</div>
</body>
</html>Bila dijalankan, script di atas akan menghasilkan Output seperti berikut ini :
Kemudian bagaimana jika Anda ingin sumber datanya di ambil dari database seperti MySQL, SQL Server, PostgreSQl dan lainnya? Tenang, sangat mudah! kita akan modifikasi contoh script AutoComplete di atas dengan menambahkan script PHP untuk mengambil data dari database. Agar tutorial mudah di pahami, Kami akan menggunakan PHP Native dan MySQL. Ikuti langkah-langkah dibawah ini:
1. Buat sebuah database dengan nama "autocomplete" melalui phpmyadmin Anda.
2. Buat sebuah table dengan nama "pemrograman" seperti script sql di bawah ini:
--
-- Table structure for table `autocomplete`
--
CREATE TABLE `pemrograman` (
`nama_bahasa` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `autocomplete`
--
INSERT INTO `pemrograman` (`nama_bahasa`) VALUES
('ActionScript'),
('AppleScript'),
('ASP'),
('BASIC'),
('C'),
('C++'),
('Clojure'),
('COBOL'),
('ColdFusion'),
('Erlang'),
('Fortran'),
('Groovy'),
('Haskell'),
('Java'),
('JavaScript'),
('Lisp'),
('Perl'),
('PHP'),
('Python'),
('Ruby'),
('Scala'),
('Scheme');3. Buat script PHP seperti di bawah ini:
<?php
// Koneksi Database
$host = 'localhost';
$username = 'root';
$password = '';
$Dbname = 'autocomplete';
$db = new mysqli($host,$username,$password,$Dbname);
// cari dan tampilkan data ke AutoComplete
$searchTerm = $_GET['term'];
$query = $db->query("SELECT * FROM pemrograman WHERE nama_bahasa LIKE '%".$searchTerm."%' ORDER BY nama_bahasa ASC");
while ($row = $query->fetch_assoc()) {
$data[] = $row['nama_bahasa'];
}
echo json_encode($data);
?>Kemudian SAVE dengan nama "data.php" dan letakan file PHP tersebut berdampingan atau satu folder dengan script AutoComplete yang akan Anda modifikasi. File "data.php" ini merupakan sumber data, data di ambil dari database MySQL melalui script PHP pada file ini.
4. Selanjutnya modifikasi script AutoComplete di atas dengan mengubah script seperti di bawah ini:
var data = [
"ActionScript",
"AppleScript",
"ASP",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];Diubah menjadi:
var data = "data.php";Sehingga menghasilkan kode lengkap seperti berikut ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cara Membuat AutoComplete dengan jQuery</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://repo.mitrateknoniaga.com/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="https://repo.mitrateknoniaga.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://repo.mitrateknoniaga.com/jquery-ui-1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
var data = "data.php";
$("#auto-complete").autocomplete({
source: data
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="auto-complete">Bahasa Pemrograman: </label>
<input id="auto-complete">
</div>
</body>
</html>Bila dijalankan, script di atas akan menghasilkan Output yang sama dengan script AutoComplete sebelumnya, yang membedakan adalah sumber datanya.
Selesai. Sangat mudah kan?
Demikian pembahasan tentang Cara Membuat AutoComplete dengan jQuery, semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca. Sampai jumpa di tulisan berikutnya. Terima Kasih
