ค้นหาและ hilight ข้อความในหน้าเว็บเพจด้วย jQuery

ตัวอย่าง

สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery - สร้างฟังก์ชัน กรอกข้อความได้เฉพาะภาษาไทยด้วย javascript
ใช้ jQuery ย้ายค่าระหว่าง multiple list box อย่างง่าย - สร้างคลิกขวาเมนูในเว็บด้วย CSS + jQuery อย่างง่ายดาย
การกำหนดให้ input text เลื่อนโฟกัส focus เองอัตโนมัติ ด้วย jQuery - สร้างแบบฟอร์มค้นหาข้อมูลในเว็บไซต์ ด้วย Google
เพิ่มลูกเล่นให้กับป้ายโฆษณาตรึงขอบล่าง ด้วย jQuery - การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง

CSS Code

<style type="text/css">
.higlight{
	background-color:#FFFF33;
	color:#333333;
}
</style>

HTML Code

<input name="keyword" type="text" id="keyword" size="25" />
<input name="iFind" type="button" id="iFind" value="Find" />
<p>สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery - สร้างฟังก์ชัน กรอกข้อความได้เฉพาะภาษาไทยด้วย javascript<br />
ใช้ jQuery ย้ายค่าระหว่าง multiple list box อย่างง่าย -  สร้างคลิกขวาเมนูในเว็บด้วย CSS + jQuery อย่างง่ายดาย<br />
การกำหนดให้ input text เลื่อนโฟกัส focus เองอัตโนมัติ ด้วย jQuery - สร้างแบบฟอร์มค้นหาข้อมูลในเว็บไซต์ ด้วย Google<br />
เพิ่มลูกเล่นให้กับป้ายโฆษณาตรึงขอบล่าง ด้วย jQuery - การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง<br />
</p>

Javascript Code

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#iFind").click(function(){	 
			$(".higlight").removeClass();
			iHilight($("#keyword").val());
	});
});
var  SearchRange;
function iHilight(str){
		if(str!=""){	  
			if(SearchRange == null) {
				SearchRange = document.body.createTextRange();
			}		
			if(SearchRange.findText(str) != false ) {
			  SearchRange.pasteHTML("<span class='higlight'>"+SearchRange.text+"</span>");	  
			  SearchRange.scrollIntoView();
			  SearchRange.moveStart("word");
			  iHilight(str);
			}else{
			  SearchRange = null;
			}
		}
}
</script>