Membuat Autocomplete dengan JQuery UI
selamat datang di panduan panduan pemrogramman web Source Code Aplikasi, kali ini kita akan belajar bagaimana Merancang Autocomplete dengan JQuery UI, yuk kita praktekan teman teman.
bikin 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 pada 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, karenanya program akan mencarikan hasilnya tersebut.
nah gampang bukan yah teman teman, demikian panduan Merancang Autocomplete dengan JQuery UI, semoga berman faat yat teman teman.
Sumber https://kursuswebsite.org
