JQuery Find and Highlight Text

Tabel Konten
  1. HTML, CSS & jQuery 

HTML, CSS & jQuery 

<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>jQuery Find and Highlight Text</title>
<style>
body {
  background-color:white;
  padding:40px 10px 10px;
  font:normal normal 13px/1.4 Arial,Sans-Serif;
  color:black;
}
.text-finder {
  position:fixed;
  top:0;
  right:0;
  left:0;
  z-index:999;
  background-color:white;
  border-bottom:1px solid gray;
  padding:5px 6px;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.highlight {
  background-color:yellow; /* highlight color */
  font-weight:bold;
}
</style>
<script src="//code.jquery.com/jquery-2.0.2.js"></script>
<script>
/*!
 highlight v4
 Highlights arbitrary terms.
 <http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>
 MIT license.
 Johann Burkard
 <http://johannburkard.de>
 <mailto:jb@eaio.com>
*/
(function($) {
    $.fn.highlight = function(pat) {
        function innerHighlight(node, pat) {
            var skip = 0;
            if (node.nodeType == 3) {
                var pos = node.data.toUpperCase().indexOf(pat);
                if (pos >= 0) {
                    var spannode = document.createElement('span');
                    spannode.className = 'highlight';
                    var middlebit = node.splitText(pos);
                    var endbit = middlebit.splitText(pat.length);
                    var middleclone = middlebit.cloneNode(true);
                    spannode.appendChild(middleclone);
                    middlebit.parentNode.replaceChild(spannode, middlebit);
                    skip = 1;
                }
            } else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
                for (var i = 0; i < node.childNodes.length; ++i) {
                    i += innerHighlight(node.childNodes[i], pat);
                }
            }
            return skip;
        }
        return this.length && pat && pat.length ? this.each(function() {
            innerHighlight(this, pat.toUpperCase());
        }) : this;
    };
    $.fn.removeHighlight = function() {
        return this.find("span.highlight").each(function() {
            this.parentNode.firstChild.nodeName;
            with (this.parentNode) {
                replaceChild(this.firstChild, this);
                normalize();
            }
        }).end();
    };
})(jQuery);

// Text finder form function
(function($) {
    $(document).ready(function() {
        var $finder = $('#text-finder'),
            $field = $finder.children().first(),
            $clear = $field.next(),
            $area = $(document.body),
            $viewport = $('html, body');
        $field.on("keyup", function() {
            $area.removeHighlight().highlight(this.value); // Highlight text inside `$area` on keyup
            $viewport.scrollTop($area.find('span.highlight').first().offset().top - 50); // Jump the viewport to the first highlighted term
        });
        $clear.on("click", function() {
            $area.removeHighlight(); // Remove all highlight inside `$area`
            $field.val('').trigger("focus"); // Clear the search field
            $viewport.scrollTop(0); // Jump the viewport to the top
            return false;
        });
    });
})(jQuery);
</script>
</head>
<body>

<form id="text-finder" class="text-finder" action="javascript:;">
    <input type="text" placeholder="Find...">
    <input type="reset" value="&times;">
</form>

Content goes here...

</body>
</html>

Lihat Demo

21 Komentar

  • Unknown

    ini seperti ctrl + f di blogger ya mas??
    terus yang aku mau tanyain,semisal, text-finder yang berada di atas,itu dihide dulu
    terus baru dimunculkan bisa mas??

  • Anonim

    Ini fungsinya buat apa mas ? :D

  • Ardy

    minta penjelasan dong mas,, masih pemula nieh saya :D

    Terima kasih mas,, 0:)

  • Ardy

    oiya mas, dipasangnya dimana yaa?? :D

  • M. Alex Joenaedi

    Keren sekali mas text-finder nya,...
    semisal saya ingin menerapkannya diatas postingan gimana tu mas...???

  • budkalon

    simpan aja kode itu di atas <div class="post-body entry-content"

  • budkalon

    Jadinya seperti ini:

    <style>
    body {
    background-color:white;
    padding:40px 10px 10px;
    font:normal normal 13px/1.4 Arial,Sans-Serif;
    color:black;
    }
    .text-finder {
    position:fixed;
    top:0;
    right:0;
    left:0;
    z-index:999;
    background-color:white;
    border-bottom:1px solid gray;
    padding:5px 6px;
    box-shadow:0 1px 2px rgba(0,0,0,.4);
    }
    .highlight {
    background-color:yellow; /* highlight color */
    font-weight:bold;
    }
    </style>
    <script src="http://code.jquery.com/jquery-2.0.2.js"></script>
    <script>
    /*!
    highlight v4
    Highlights arbitrary terms.
    <http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>
    MIT license.
    Johann Burkard
    <http://johannburkard.de>
    <mailto:jb@eaio.com>
    */
    //<![CDATA[
    (function($) {
    jQuery.fn.highlight = function(pat) {
    function innerHighlight(node, pat) {
    var skip = 0;
    if (node.nodeType == 3) {
    var pos = node.data.toUpperCase().indexOf(pat);
    if (pos >= 0) {
    var spannode = document.createElement('span');
    spannode.className = 'highlight';
    var middlebit = node.splitText(pos);
    var endbit = middlebit.splitText(pat.length);
    var middleclone = middlebit.cloneNode(true);
    spannode.appendChild(middleclone);
    middlebit.parentNode.replaceChild(spannode, middlebit);
    skip = 1;
    }
    } else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
    for (var i = 0; i < node.childNodes.length; ++i) {
    i += innerHighlight(node.childNodes[i], pat);
    }
    }
    return skip;
    }
    return this.length && pat && pat.length ? this.each(function() {
    innerHighlight(this, pat.toUpperCase());
    }) : this;
    };
    jQuery.fn.removeHighlight = function() {
    return this.find("span.highlight").each(function() {
    this.parentNode.firstChild.nodeName;
    with (this.parentNode) {
    replaceChild(this.firstChild, this);
    normalize();
    }
    }).end();
    };
    })(jQuery);
    // Text finder form function
    $(document).ready(function() {
    var $finder = $('#text-finder'),
    $field = $finder.children().first(),
    $clear = $field.next(),
    $area = $(document.body),
    $viewport = $('html, body');
    $field.on("keyup", function() {
    $area.removeHighlight().highlight(this.value); // Highlight text inside `$area` on key up
    $viewport.scrollTop($area.find('span.highlight').first().offset().top - 50); // Jump the viewport to the first highlighted term
    });
    $clear.on("click", function() {
    $area.removeHighlight(); // Remove all highlight inside `$area`
    $field.val('').trigger("focus"); // Clear the search field
    $viewport.scrollTop(0); // Jump the viewport to the top
    return false;
    });
    });
    //]]>
    </script>
    <form id="text-finder" class="text-finder" action="javascript:;">
    <input type="text" placeholder="Find...">
    <input type="reset" value="&times;">
    </form>
    <div class="post-body entry-content" id="xxx">
  • M. Alex Joenaedi

    Waduh Terimaksih banyak mas Dzulmar Ismail Hijra atas pencerahannya,
    saya ijin praktek

  • abang ichal

    ya sama sama mas

  • Ivan Mantovani S

    mas, kok sya belum dikirimi email dari mas terkait pemesanan template ? ._.

  • Ivan Mantovani S

    email saya ivanmantovani7@gmail.com

  • Unknown

    MINAL AIDIN WALFAIDZIN MOHON MAAF LAHIR DAN BATIN
    SELAMAT HARI RAYA IDUL FITRI

  • Fajrin

    duh.. ane kagak ngerti mas :D

  • Anonim

    Tampilan demo nya sangat menarik kang, tapi klw js nya sebanyak itu saya rasa hnya akan memperlambat blog....

  • Unknown

    srius ngga ngerti gw apa yg dimaksud dgn post diatas :v

  • no data

    yah saya kurang nerti mas :D
    - salam damai -

  • Imron Fhatoni

    tak coba dulu mas

  • you

    saya coba integrasikan dengan pencarian

  • you

    akhirnya sudah bisa...

  • Abdul Hamid

    Mas Taufik, kalau find next gimana caranya ya? Nggak cuma dipindah ke hasil pencarian pertama, tetapi dapat digulirkan ke teks selanjutnya yang sama dengan isian formulir? Mohon bantuanya mas saya nggak paham script.

  • Kang Rian リアンさん

    Nyimak..

Komentar telah ditutup.