Cara Membuat Auto Complete Seacrh Dengan Jquery UI
Sering kita jumpai sebuah input pencarian atau search di sebuah blog, seperti contoh form input search di google. Ketika kita ketikkan text, otomatis form input akan ada alternatif di bawah nya. Nah kali ini saya akan memberikan tips dan trik mengenai Cara Membuat Auto Complete Seacrh Dengan Jquery UI sederhana, dimana kita bikin sebuah form kemudian kita berikan manfaat Jquery UI nya. Demo gambar nya seperti gambar di bawah ini
Nah seperti yang kalian lihat di gambar di atas ini, seperti itu saya ketikkan huruf a karenanya Auto Complete akan membaca isi inputan yang dijalankan oleh Jquery. Bagus, sekarang ini kita akan implementasikan Cara Membuat Auto Complete Seacrh Dengan Jquery UI. Seperti lazim teman-teman siapkan text editornya, kemudian copy script html nya di bawah ini
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta name=viewport content=width=device-width, initial-scale=1>
<title>Auto Complete</title>
</head>
<body>
<div class=ui-widget>
<label for=Cari>Cari: </label>
<input id=Cari>
</div>
</body>
</html>
Kemudian paste di text editornya dan save dengan index.html, lalu jalankan di browsernya. Karenanya hasilnya seperti gambar di bawah ini
Langkah berikutnya kita berikan manfaat Jquery UI nya bagi memberikan Auto Complete, teman-teman berikan library Jquery UI nya di pada tag <head> atau dapat copy script di bawah ini
<link rel=stylesheet href=http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css>
<link rel=stylesheet href=http://resources/demos/style.css>
<script src=https://code.jquery.com/jquery-1.12.4.js></script>
<script src=https://code.jquery.com/ui/1.12.1/jquery-ui.js></script>
Kemudian kita berikan nama-nama bagi Auto Complete nya, disini saya memberikan nama-nama elektronik seperti gambar di bawah ini, teman-teman bebas memberikan nama apa saja
Lalu kita bikin variabel nya bagi kita hubungkan dengan input
<script>
$( function() {
var pencarian = [
Laptop,
Hanphone,
Monitor,
TV,
AC,
Playstation,
Blender,
USB,
VGA,
RAM,
Keyboard
];
$( #Cari ).autocomplete({
source: pencarian
});
} );
</script>
Kalau telah, save dan refresh di browsernya kemudian inputkan text apa saja di kotak pencarian. Karenanya Auto Complete akan filter hurufnya jikalau ada karenanya otomatis akan muncul nama-nama elektronik yang saya bikin tadi tetapi jikalau tak ada Auto Complete tak akan menampilkannya.
Betul-betul gampang bukan…
Bagus, lumayan demikian di panduan Source Code Aplikasi mengenai Cara Membuat Auto Complete Seacrh Dengan Jquery UI kita berjumpa lagi di panduan berikut nya di www.kursuswebprogramming.com yaitu kita akan belajar Kolaborasi Auto Complete Jquery UI dan PHP
Terima Kasih dan Hingga Jumpa.
Semoga bermanfaat 🙂
Sumber https://kursuswebsite.org
