ค้นหาข้อความในหน้าเว็บเพจอย่างง่ายด้วย jQuery

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">
var  SearchRange;
$(function(){
	$("#iFind").click(function(){	 
		if($("#keyword").val()!=""){	  
			if(SearchRange == null) {
				SearchRange = document.body.createTextRange();
			}		
			if(SearchRange.findText($("#keyword").val()) != false ) {
			  SearchRange.select();
			  SearchRange.scrollIntoView();
			  SearchRange.moveStart("word");
			}else{
			  SearchRange = null;
			}
		}
	});
});
</script>

ตัวอย่าง พิมพ์ข้อความช่องข้อความ แล้วกดปุม Find หากข้อความตรงกับข้อความใดในหน้าเว็บนี้ ก็จะทำการเลือกข้อความนั้น ๆ ตัวอย่างพิมพ์คำว่า ตัวอย่าง แล้วกดปุม Find

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