Membuat Autocomplete dengan JQuery UI

selamat datang di tutorial tutorial pemrogramman web dumet school, kali ini kita akan belajar bagaimana Membuat Autocomplete dengan JQuery UI, yuk kita praktekan teman teman.

buat file dengan nama index. html ketikan di dalamnya struktur berikut, strukturnya sederhana cuman ada label dan input teks saja.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Auto Complete Jquery UI </title>
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>
<body>
	<form action="">
		<label for="tag">Tag :</label>
		<input type="text" id="cari" placeholder="cari di sini">
	</form>
</body>
</html>

dan setelah itu kita sambungkan dengan jquery dan jquery ui nya jangan lupa.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>

di dalam jquery ketikan kode berikut

	$(function(){
		var dataNama = [
			'andi', 'rizal','joko','risman','ambara','veni','jingga','jodi','maya', 'agus','sandi','heri','fredi','rika','opang'
		];

		$('#cari').autocomplete({
			source: dataNama
			// source: dataArr
		})
	})

setelah itu coba kita jalankan di webrowser, misalnya kita akan mencari nama yang didalmnya ada huruf r, maka sistem akan mencarikan hasilnya tersebut.

nah mudah bukan yah teman teman, sekian tutorial Membuat Autocomplete dengan JQuery UI, semoga berman faat yat teman teman.