PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

30 March 2009 By
ข้อความ ค้นหา hilight ่jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ข้อความ ค้นหา 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>







Tags:: hilight ข้อความ ค้นหา ่jquery






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง