Cara Menggunakan Multi Auto Complete Dengan Plugins Jquery
Di artikel sebelumnya saya telah membahas mengenai Cara Membuat Auto Complete Seacrh Dengan Jquery UI, dimana sebuah input form search otomatis ketika text di inputkan di form. Dan di kesempatan kali ini saya pun akan memberikan tips dan trik mengenai Cara Menggunakan Multi Auto Complete Dengan Plugins Jquery, dan nanti teman – teman dapat lihat hasil yang akan kita pelajari. Hampir sama dengan artikel sebelumnya, namun ada sedikit perubahan yaitu dengan MagicSearch dimana sebuah input search mempunyai multi auto complete atau menampilkan lebih dari satu kata. Atau teman – teman dapat lihat gambar di bawah ini supaya tak bingung
Nah dapat teman – teman lihat di gambar di atas ini, ketika saya ketikkan huruf ‘s‘ karenanya nama yang terdapat huruf ‘s‘ akan di tampilkan, pastinya tampilannya pun pun menarik. Semacam itu kita klik di form karenanya form akan berubah warna seperti ada animate nya. Teman – teman tak usah bingung bagaimana membuatnya, kita tak akan membuatnya melainkan hanya memakai plugins saja, artinya kita hanya tinggal gunakan saja yang telah di sediakan oleh plugins tersebut. Bagus, saatnya kita praktekkan Cara Menggunakan Multi Auto Complete Dengan Plugins Jquery sebelum memulai kalian siapkan plugins nya terlebih dahulu, atau dapat klik link ini bagi unduh. Sekiranya telah di unduh teman – teman extract di folder.
Kemudian siapkan text editornya dan copy script html nya di bawah ini
<!DOCTYPE html>
<html lang=zh-CN>
<head>
<title>Basic - MagicSearch</title>
<meta charset=UTF-8>
<meta name=viewport content=width=device-width, initial-scale=1>
</head>
<body class=theme1>
<div id=container>
<div class=adjust></div>
<h1>MagicSearch</h1>
<section>
<input class=magicsearch id=basic placeholder=search names...>
</section>
</div>
</body>
</html>
Dan pastekan di text editornya, lalu save dengan nama index.html. Langkah berikutnya kita tinggal panggil plugins nya di pada tag <head>
Berikutnya kita panggil file yang berextensi .js, dan tambahkan pun script Jquery nya seperti gambar di bawah ini
Teman – teman ketikkan persis seperti gambar di atas ini ya, yang saya beri kotak warna orange dan warna merah. Sekiranya telah, save dan jalankan di browser nya. Karenanya hasilnya telah seperti yang kita akan bikin tadi.
Bagaimana..??
Lumayan gampang bukan..??
Oke, demikianlah dulu di artikel kali ini mengenai Cara Menggunakan Multi Auto Complete Dengan Plugins Jquery kita berjumpa kembali di artikel berikutnya.
Semoga bermanfaat.
Terima Kasih dan Hingga Jumpa.
Sumber https://kursuswebsite.org
