rachmat

Current Date:12 July, 2020

Cara Membuat AutoComplete dengan jQuery

jQuery adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML.
4.8
(4)

Hallo sobat, pada tulisan kali ini Saya 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.rachmat.id/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="https://repo.rachmat.id/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://repo.rachmat.id/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 :

Cara Membuat AutoComplete dengan jQuery

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, Saya 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.

Cara Membuat AutoComplete dengan jQuery

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.rachmat.id/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="https://repo.rachmat.id/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://repo.rachmat.id/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, silahkan tinggalkan komentar pada tulisan ini bila ingin bertanya atau memberi masukan. Semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca, sampai bertemu di tulisan berikutnya. Terima Kasih

Apakah artikel ini membantu Anda?

klik bintang untuk memberikan nilai

Total nilai 4.8/5 dari 4 suara

Tidak ada suara sejauh ini! Jadilah yang pertama memberi nilai pada tulisan ini.

Leave a Reply

Your email address will not be published. Required fields are marked *



Hai kak, 1x klik iklan pada blog ini merupakan bentuk donasi Anda untuk kemajuan blog ini.

😉