Pada artikel sebelumnya saya sudah membahas tentang Cara Membuat Auto Complete Seacrh Dengan Jquery UI, dimana sebuah input form search otomatis ketika text di inputkan pada form. Dan pada kesempatan kali ini saya juga akan memberikan tips dan trik tentang Cara Menggunakan Multi Auto Complete Dengan Plugins Jquery, dan nanti teman – teman bisa lihat hasil yang akan kita pelajari. Hampir sama dengan artikel sebelumnya, namun ada sedikit perubahan yaitu dengan MagicSearch dimana sebuah input search memiliki multi auto complete atau menampilkan lebih dari satu kata. Atau teman – teman bisa lihat gambar di bawah ini supaya tidak bingung
Nah bisa teman – teman lihat pada gambar di atas ini, ketika saya ketikkan huruf ‘s‘ maka nama yang ada huruf ‘s‘ akan di tampilkan, tentunya tampilannya pun juga menarik. Begitu kita klik pada form maka form akan berubah warna seperti ada animate nya. Teman – teman tidak usah bingung bagaimana membuatnya, kita tidak akan membuatnya melainkan hanya memakai plugins saja, artinya kita hanya tinggal pakai saja yang sudah di sediakan oleh plugins tersebut. Baik, saatnya kita praktekkan Cara Menggunakan Multi Auto Complete Dengan Plugins Jquery sebelum memulai kalian siapkan plugins nya terlebih dahulu, atau bisa klik link ini untuk download. Jika sudah di download teman – teman extract pada 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 pada text editornya, lalu save dengan nama index.html. Langkah berikutnya kita tinggal panggil plugins nya di dalam tag <head>
Berikutnya kita panggil file yang berextensi .js, dan tambahkan juga 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. Jika sudah, save dan jalankan pada browser nya. Maka hasilnya sudah seperti yang kita akan buat tadi.
Bagaimana..??
Cukup mudah bukan..??
Oke, sekian dulu pada artikel kali ini tentang Cara Menggunakan Multi Auto Complete Dengan Plugins Jquery kita berjumpa kembali pada artikel berikutnya.
Semoga bermanfaat.
Terima Kasih dan Sampai Jumpa.