Livesearch

Seperti biasanya kegiatan yang pertama kali sering saya lakukan di akhir pekan adalah menjelajah sejumlah weblog yang diasuh oleh para pakar dan ahli di bidang web design dan development, baik dalam maupun luar negeri. Adapun tujuan utama saya dari kebiasaan ini adalah untuk mengejar ketertinggalan saya dan memperluas wawasan saya di bidang-bidang tersebut. Acap kali setelah membaca tulisan-tulisan yang terdapat di weblog-weblog yang dimaksud, saya menjadi tertantang untuk mencoba dan mempraktikkannya. Salah satu di antaranya adalah tulisan berikut, Livesearch.

Yang menjadi pusat perhatian saya ketika mencoba feature ini adalah diberikannya kemudahan kepada pengguna untuk segera memperoleh hasil yang dicari tanpa harus meninggalkan halaman yang tengah dikunjungi. Hanya saja kemudahan ini belum dapat dinikmati oleh para pengguna yang menggunakan Opera dan Omniweb sebagai alat perambah (browser). Tapi dengan mengandalkan IE, Mozilla dan Safari sebagai mesin perambah utama, anda telah dapat menjangkau mayoritas dari pengguna internet saat ini. Jadi, feature ini walau dengan sejumlah keterbatasannya saya rasa patut dicoba. Jangan khawatir bagi para pengguna yang tidak dapat menikmati kemudahan ini, mereka masih dapat menggunakan kotak pencarian sebagaimana mestinya. 🙂

Di sini saya akan mencoba menerjemahkan tulisan yang ditulis oleh Michael Heilemann dan menggunakan contoh yang juga diperoleh dari situsnya. Namun, sebelum itu ada baiknya anda mengunjungi situs berikut yang menjadi dasar feature ini, http://blog.bitflux.ch/wiki/LiveSearch.

Feature ini sepertinya dapat diimplementasikan di mana saja. Tapi, dalam kesempatan ini, kita akan mencobanya di WordPress 1.2x. Untuk versi 1.5, silakan dicoba sendiri ya.. 🙂 Saya rasa tidak akan berbeda jauh.

Adapun langkah-langkah yang dilakukan dapat dijabarkan secara sederhana di bawah ini:

Download file berikut, livesearch.php, yang dapat diperoleh di situsnya Michael Heilemann.
Kemudian, non aktifkan kode berikut yang dapat ditemukan di baris 527 di file wp-blog-header.php
if ($s && empty($paged)) { // If they were doing a search and got one result
if (!strstr($_SERVER[‘PHP_SELF’], ‘wp-admin’)) // And not in admin section
header(‘Location: ‘ . get_permalink($posts[0]->ID));
}

atau, bagi yang tidak mau mengotori tangannya, silakan men-download kopi yang telah disediakan oleh Michael di sini.
Setelah itu, kunjungi situs BitFlux Blog wiki untuk membaca petunjuk pemakaiannya. Secara umum dapat dijelaskan sebagai berikut:
- Download file livesearch.js, lalu ubah sedikit kodenya untuk dapat bekerja di WP.
  Cari:
  
  liveSearchReq.onreadystatechange= liveSearchProcessReqChange;
  liveSearchReq.open(“GET”, “/livesearch.php?q=” + document.forms.searchform.q.value);
  liveSearchLast = document.forms.searchform.q.value;
  liveSearchReq.send(null);
  
  ganti menjadi:
  
  liveSearchReq.onreadystatechange= liveSearchProcessReqChange;
  liveSearchReq.open(“GET”, “/livesearch.php?s=” + document.forms.searchform.s.value);
  liveSearchLast = document.forms.searchform.s.value;
  liveSearchReq.send(null);
- Kemudian di halaman HTML di mana feature ini akan digunakan, lakukan beberapa hal berikut:
  – Buat link untuk livesearch.js di antara <head></head>, contoh:
  <script type=”text/javascript” src=”http://www.namadomain.com/livesea
  rch.js”></script>
  – Lalu di tag <body>, tambahkan kode berikut di dalamnya, onload=”liveSearchInit()”
  – Selanjutnya buatlah sebuah form untuk kotak pencarian, beri nama “searchform”. Untuk kotak inputnya, id=”livesearch”, name=”q” dan onkeypress=”liveSearchStart()”
  – Di bagian tempat hasil pencarian akan ditampilkan, biasanya setelah kode HTML untuk form, tambahkan kode berikut:
  <div id="LSResult" style="display: none;"><div id="LSShadow"></div></div>
Setelah semua file dimodifikasi, jangan lupa untuk meng-upload-nya ke server anda.
Untuk mempermanis tampilan dari hasil pencarian, anda dapat mengutak-atik file CSS anda dengan menggunakan id dan style yang telah diberikan oleh kode-kode di atas.
Selesai! Silakan dicoba dan semoga saja feature ini dapat bermanfaat bagi anda.

Demo: Silakan bermain-main dengan kotak pencarian yang terdapat di situs ini.

Jika anda mengalami kesulitan dalam mengimplementasikannya di WP anda, silakan saja melihat source dari situs saya dan men-download file-file yang diinginkan. Tapi, harap tidak membabi buta dengan me-link-nya lansung ke situs saya ya.. 🙂

Mari sama-sama kita ciptakan lingkungan internet yang sehat.

Share this:

Like this:

Related

2 Comments