Mecha versi 2.6.3 sudah dirilis!

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:[email protected]>
*/
(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:[email protected]>
*/
//<![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

Ivan Mantovani S

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

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 -

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.

Komentar telah ditutup.