Membuat Kotak Tombol Find (CTRL+F) di Blog

Hampir semua browser kelas atas sebenarnya sudah menyediakan box find untuk mencari/search dalam satu halaman. Tinggal tekan tombol CTRL+F maka akan keluar search box untuk mencari per kata atau bahkan beberapa kata sekaligus.

Akan tetapi, mungkin sebagian pengunjung ada yang belum paham dengan cara ini atau mungkin perangkat yang digunakan tidak ada tombol CTRL, sehingga dengan adanya kotak cadangan ini saya rasa akan mempermudah pengguna.

Widget ini telah saya coba di Chrome dan Mozilla work. Mungkin di sebagian jenis browser tidak mendukung. Untuk memasangnya, silahkan ambil kode-kode dibawah.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
HTML
    <div class="searchContend_h">
        <div class="ui-grid-c">
            <div class="ui-block-a">
                <input style="padding-left:5px" name="text-12" id="text-12" value="buku" type="text" class="textSearchvalue_h" />
<input type="button" class="searchButtonClickText_h" value="Cari" />
            </div>
            <div class="ui-block-c">
                <a href="#" class="previous_h">&laquo;Prev</a> * <a href="#" class="next_h">Next&raquo;</a>
            </div>
            <div id="realTimeContents"><br />
buku gambar digunakan untuk menggambar<br />
buku tulis digunakan untuk menulis<br />
kalau buku pelajaran digunakan untuk belajar<br />
            </div>
        </div>
    </div>
JavaScript
/*******
** Get more script: http://www.kangsigit.com **
   *************************************************
*****/

        function searchAndHighlight(searchTerm, selector) {
            if (searchTerm) {              
                var selector = selector || "#realTimeContents"; //use body as selector if none provided
                var searchTermRegEx = new RegExp(searchTerm, "ig");
                var matches = $(selector).text().match(searchTermRegEx);
                if (matches != null && matches.length > 0) {
                    $('.highlighted').removeClass('highlighted'); //Remove old search highlights

                    //Remove the previous matches
                    $span = $('#realTimeContents span');
                    $span.replaceWith($span.html());

                    if (searchTerm === "&") {
                        searchTerm = "&amp;";
                        searchTermRegEx = new RegExp(searchTerm, "ig");
                    }
                    $(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>" + searchTerm + "</span>"));
                    $('.match:first').addClass('highlighted');

                    var i = 0;

                    $('.next_h').off('click').on('click', function () {
                        i++;

                        if (i >= $('.match').length) i = 0;

                        $('.match').removeClass('highlighted');
                        $('.match').eq(i).addClass('highlighted');
                        $('.ui-mobile-viewport').animate({
                            scrollTop: $('.match').eq(i).offset().top
                        }, 300);
                    });
                    $('.previous_h').off('click').on('click', function () {

                        i--;

                        if (i < 0) i = $('.match').length - 1;

                        $('.match').removeClass('highlighted');
                        $('.match').eq(i).addClass('highlighted');
                        $('.ui-mobile-viewport').animate({
                            scrollTop: $('.match').eq(i).offset().top
                        }, 300);
                    });




                    if ($('.highlighted:first').length) { //if match found, scroll to where the first one appears
                        $(window).scrollTop($('.highlighted:first').position().top);
                    }
                    return true;
                }
            }
            return false;
        }

        $(document).on('click', '.searchButtonClickText_h', function (event) {

            $(".highlighted").removeClass("highlighted").removeClass("match");
            if (!searchAndHighlight($('.textSearchvalue_h').val())) {
                alert("No results found");
            }
        });
CSS Style
.highlighted {
background-color: yellow;
}
.highlight {
background-color: #fff34d;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3-4 */
border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}
.highlight {
padding: 1px 4px;
margin: 0 -4px;
}

URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini