Highlight hasil pencarian

Salah satu hal yang membantu pengguna dalam suatu mesin pencari adalah highlight atau penandaan hasil pencarian. Penandaan ini maksudnya menandai bagian mana dari dokumen yang dicari yang cocok dengan query yang dimasukkan, bisa dengan memberi bold pada kata-kata yang cocok (seperti pada Google) atau memberi warna berbeda pada kata-kata yang cocok.

Contohnya seperti berikut (pada Google dengan kata kunci “search term highlighting”) :

Nah, pada pekerjaan penelitian saya, perlu juga dilakukan semacam ini agar pengguna lebih mudah menemukan kata mana dari sebuah dokumen yang dianggap cocok oleh sistem.

Namun ternyata tidak mudah. Karena pencarian yang dilakukan adalah pencarian approximate atau tidak tepat sama, maka penandaan yang dilakukan pun juga tidak bisa pas. Sebenarnya ada data tentang posisi kemunculan query pada dokumen, namun posisi tersebut adalah posisi pada kode fonetik (teks Latin atau transliterasinya). Padahal yang akan ditampilkan adalah teks Arab atau teks Al-Quran asli. Maka harus dikira-kira bagian mana yang cocok dengan bermodal informasi posisi kemunculan term.

Karena itu, tidak bisa langsung “membungkus” kata yang dianggap cocok untuk di-bold misalnya. Maka dalam implementasinya di HTML saya menggunakan 2 lapisan. Lapisan pertama adalah teks Quran itu sendiri, sedangkan lapisan kedua berada di belakangnya yaitu beberapa elemen <DIV> berwarna pada posisi kemunculan term tertentu. Elemen-elemen <DIV> inilah yang menyusun efek “sorotan” atau highlight pada posisi tertentu, dengan lebar yang disesuaikan agar pas dengan teks di depannya.

Seperti ini hasilnya (dengan kata kunci “alhamdulillah”) :

Terlihat bahwa “sorotan” tidak tepat pada kata yang dituju karena memang hanya perkiraan tempat kemunculan. Ada yang “sorotan” terlalu panjang, ada yang tergeser ke depan, ada yang tergeser ke belakang, tapi alhamdulillah ada juga yang pas :)

Meskipun tidak sempurna, paling tidak sedikit membantu pengguna untuk mengetahui bagian mana dari ayat yang cocok dengan yang dicari. Sekian.