ค้นหาข้อความในหน้าเว็บเพจอย่างง่ายด้วย jQuery
เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdeeค้นหา jquery
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ค้นหา jquery
ลองดูที่ใหม่กว่า เปลี่ยนมาใช้ window.find() [อัพเดท 19-05-2018] เป็นแนวทางแทน
เปลี่ยนมาใช้ window.find('ข้อความที่ต้องการหา'); แทน
$("#iFind").click(function(){ if($("#keyword").val()!=""){ window.find($("#keyword").val()); } });
- เปลี่ยนมาใช้ window.find() [อัพเดท 19-05-2018]
ไปที่ Copy
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 สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ