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

14 March 2009

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 สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง








บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

12 Aug 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อน ซ้าย ขวา คล้าย marquee อ่าน 2558 27 Nov 09 แก้ปัญหาความกว้าง option ของ select tag ใน ie ด้วย jQuery และ css อย่างง่าย อ่าน 2530 08 Dec 09 แปลง jQuery object เป็น DOM object อ่าน 2475 25 Sep 08 การกำหนดความกว้างความสูงของ element ด้วยฟังก์ชันของ jQuery อ่าน 2453 02 Oct 10 สร้าง animation แนะนำเส้นทาง ใน google map อย่างง่าย อ่าน 2449 12 Sep 10 การดึง attribute และค่าต่างๆ จาก xml ไฟล์ด้วย jQuery อย่างง่าย อ่าน 2424 05 Nov 10 แนวทาง ประยุกต์ กำหนด event ให้กับ jQuery UI datepicker อ่าน 2400 21 Oct 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อนขึ้น เลื่อนลง คล้าย marquee แนวตั้ง อ่าน 2387 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2378 11 Nov 10 แนะนำ การแทรก swf ไฟล์ ด้วย jQuery SWFObject Plugin อ่าน 2377 27 May 10 ทบทวน ลำดับ การทำงาน mouse events ใน jQuery อ่าน 2365 05 Apr 10 กำหนด link ลิ้งค์ ทั้งหมด ให้ เปิดหน้าต่างใหม่ ด้วย jQuery อย่างง่าย อ่าน 2352 27 Jun 11 ลูกเล่น เพิ่มช่องรับ input type file อัตโนมัติ ด้วย jQuery อ่าน 2313 01 Nov 10 ประยุกต์ ฟังก์ชัน animate ใน jQuery เลื่อน scroll หน้าเพจ อ่าน 2308 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2281

บทความคนเข้าอ่านวันนี้

25 Sep 08 ฟังก์ชั่นเกี่ยวกับ วันที่ เวลา ใน javascript อ่าน 7135 25 Sep 08 ตรวจสอบระดับความปลอดภัยของ รหัสผ่านด้วย Ajax อ่าน 3928 08 Oct 10 การอัพเดท สถานะบน facebook อัตโนมัติ แบบ graph api ด้วย php sdk อ่าน 3534 09 Jul 10 เพิ่มความเร็ว ให้กับการ cache ด้วย jquery ajax และ php cache class อ่าน 2299
จำนวนผู้เยี่ยมชม 784684
คน 2012 © Copyright ninenik.com. All rights reserved.