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

เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee
่jquery hilight ค้นหา ข้อความ

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ่jquery hilight ค้นหา ข้อความ

ดูแล้ว 11,197 ครั้ง


ตัวอย่าง

สร้าง 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>



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











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ