Pernah liat search box arilnacode? Ternyata blog tersebut menggunakan ajax loader untuk search boxnya.
Cara Kerja dari Ajax Loader Search Box
Ketika diketik query dalam search box maka otomatis muncul hasil dari pencarian tersebut akan langsung muncul, lihat video di bawah untuk contoh atau bisa sobat klik pencarian di blog ini dan ketikan query apapun selama query sama dengan salah satu konten yang ada di blog ini maka akan muncul hasilnya langsung.
Cara Menerapkan Search Box Mirip Arlinacode
Untuk menerapkanya sobat bisa menggunakan javascript berikut di atas kode
</body>
.
<script src='//fiik346.github.io/js/search.js?live=true'/>
Ketika kode tersebut dipasang maka akan mencari tag input dengan name q, jika terdapat lebih dari dua form pencarian maka pencarian pertama yang akan berfungsi sebagai ajax loader search box.
Untuk menampilkan gambar bisa dengan menambahkan image=true atau disertai
value dari ukuran parameter pengubah gambar dari Google image seperti
w200-c
atau w200-h100-p-k-no-nu
contoh.
<script src='//fiik346.github.io/js/search.js?live=true&image=true'/>
Atau menggunakan seperti berikut.
<script src='//fiik346.github.io/js/search.js?live=true&image=w64-c'/>
Lihat dokumentasi selengkapnya dari dte.web.id yang bisa sobat lihat di Menambahkan Fitur AJAX Penelusuran di Blog
Supaya search box tersebut lebih menarik sobat bisa menambahkan css style sendiri.
Akhir kata
Begitulah cara membuat search box ajax loader yang mirip dengan blog arlinacode, dan sangatlah mudah untuk menerapkanya. Berterimakasihlah kepada Taufik Nurrohman sang pembuat search box ajax loader ini.
Comments
Post a Comment
- Gunakan <em>kode yang sudah diparse html</em> untuk menampilkan kode.
- Tidak diperbolehkan menggunakan hyperlink
- Untuk sementara komentar tidak akan dibalas (author sibuk)