Jan
6
2010
Tips

Search highlighter by jQuery

Author An article by Pachai Leknettip    Comments No Comments

Search highlighter by jQuery
มี tip เล็กมาแนะนำครับ คือการเน้นข้อความ โดยใช้ jQuery ครับ
โดยจะเอามาประยุกต์ใช้กับ การค้นหาข้อความ
มาดูตัวอย่างกันได้เลย
ส่วนของ html และ css

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
.highlight { background-color:yellow }
</style>
<input id="txtSearch" name="txtSearch" type="text" />
<input id="btnSearch" name="btnSearch" type="button" value="Search" />
<div id="divContent">This is the recommended version of jQuery to use for your application.
The code in here should be stable and usable in all modern browsers.
The minified versions, while having a larger file size than the packed versions (note: packed version is not available in current release), are generally the best versions to use on production deployments.
The packed versions require non-trivial client-side processing time to uncompress (unpack) the code whereas the minified versions do not.
The packed versions of jQuery will take less time to download than the minified or uncompressed versions;
however, each time the library is loaded (initially or from the browser cache) it will need to be uncompressed which will cause a non-trivial delay in the execution of any jQuery code each time it is loaded.</div>

ส่วนของ Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">// <![CDATA[
$(document).ready(function (){
$("#btnSearch").click(function (){
str = $('#txtSearch').val();
if (str !== ''){
re = new RegExp(str,'g');
ostr = $('span:first-child[class="highlight"]').text();
$('div span:[class="highlight"]').after(ostr);
$('div span:[class="highlight"]').siblings('span').remove();
content = $('#divContent').text();
ncontent = content.replace(re,'<span class=highlight>'+str+'</span>');
$('#divContent').html(ncontent);
}
});
});
// ]]></script>

ตัวอย่าง

This is the recommended version of jQuery to use for your application.
The code in here should be stable and usable in all modern browsers.
The minified versions, while having a larger file size than the packed versions (note: packed version is not available in current release), are generally the best versions to use on production deployments.
The packed versions require non-trivial client-side processing time to uncompress (unpack) the code whereas the minified versions do not.
The packed versions of jQuery will take less time to download than the minified or uncompressed versions;
however, each time the library is loaded (initially or from the browser cache) it will need to be uncompressed which will cause a non-trivial delay in the execution of any jQuery code each time it is loaded.

Tags: , ,

Related Posts

About the Author: Pachai Leknettip

Comments are closed.