แนะนำ การใช้งาน jQuery quicksearch plugin
11 February 2011รูปแบบการใข้งาน Quicksearch จะเป็นการอำนวยความสะดวกในการค้นหาข้อมูล จากรายการ
ข้อมูลทั้งหมดที่แสดงตั้งแต่ต้น โดย jQuery quicksearch plugin มีลูกเล่น และการปรับใช้งาน
ได้อย่างดี
สามารถดาวน์โหลด และศึกษาวิธีการใช้งาน เพิ่มเติมได้ที่
https://github.com/riklomas/quicksearch
ตัวอย่างการใช้งานอย่างง่าย
| Id | Phone | Total | Ip | Url | Time | ISO Date | UK Date | |
|---|---|---|---|---|---|---|---|---|
| devo@flexomat.com | 66672 | 941-964-8535 | $2482.79 | 172.78.200.124 | http://gmail.com | 15:10 | 1988/12/14 | 14/12/1988 |
| henry@mountdev.net | 35889 | 941-964-9543 | $2776.09 | 119.232.182.142 | http://www.gmail.com | 3:54 | 1974/1/19 | 19/1/1974 |
| christian@reno.gov | 60021 | 941-964-5617 | $2743.41 | 167.209.64.181 | http://www.dotnet.ca | 10:58 | 2000/3/25 | 25/3/2000 |
| muffins@donuts.com | 17927 | 941-964-9511 | $2998.18 | 210.214.231.182 | http://google.se | 21:22 | 1993/1/24 | 24/1/1993 |
| muffins@reno.gov | 76375 | 941-964-2757 | $1836.09 | 220.222.93.171 | http://www.samba.org | 15:22 | 1988/4/4 | 4/4/1988 |
| mendez@gmail.com | 45834 | 941-964-2575 | $2805.46 | 228.170.245.253 | http://flexomat.com | 11:31 | 1975/12/12 | 12/12/1975 |
| dev@gmail.com | 20022 | 941-964-4967 | $3296.54 | 175.248.70.240 | http://www.flexomat.com | 4:27 | 2002/7/3 | 3/7/2002 |
| foo@polyester.se | 55977 | 941-964-745 | $2953.73 | 222.114.227.156 | http://www.donuts.com | 23:49 | 1977/8/4 | 4/8/1977 |
| adam@aftonbladet.se | 38867 | 941-964-6302 | $1949.27 | 116.241.143.196 | http://flexomat.com | 23:35 | 1995/7/27 | 27/7/1995 |
| devo@donuts.com | 51426 | 941-964-1234 | $1067.00 | 88.96.149.82 | http://www.polyester.se | 15:17 | 1986/1/5 | 5/1/1986 |
| henry@samba.org | 40859 | 941-964-4856 | $3401.19 | 68.152.250.74 | http://www.flexomat.com | 4:36 | 1990/3/7 | 7/3/1990 |
| found@dotnet.ca | 23986 | 941-964-2686 | $1393.52 | 98.102.181.138 | http://lostnfound.org | 5:51 | 1993/7/22 | 22/7/1993 |
| carl@fish.org | 73392 | 941-964-5792 | $3876.04 | 246.234.182.243 | http://www.google.se | 6:52 | 1984/7/14 | 14/7/1984 |
| found@mountdev.net | 03519 | 941-964-1599 | $1176.48 | 104.212.122.177 | http://donutsx.com | 18:52 | 2000/8/6 | 6/8/2000 |
โค้ดตัวอย่าง การใช้งานเบื้องต้น และคำอธิบาย
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery quick search</title>
<style type="text/css">
* {
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
table#table_example2 {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
}
table#table_example2 thead th {
background: #f34105;
color: #fff;
}
table#table_example2 tbody th {
text-align: left;
}
table#table_example2 th, table#table_example2 td {
border: 1px solid #ddd;
padding: 2px 5px;
font-size: 100%;
}
.odd, .r1 {
background: #fff;
}
.even, .r2 {
background: #eee;
}
.r3 {
background: #ebebeb;
}
.search {
font-weight: bold;
}
.show {
background-color:#FC0;
}
.odd, .r1 { background: #fff; }
.even, .r2 { background: #eee; }
.r3 { background: #ebebeb; }
.search { font-weight: bold; }
</style>
</head>
<body>
<form action="#">
<fieldset>
<input name="search" type="text" id="id_search2" value="" size="50" />
<span class="loading">Loading...</span>
</fieldset>
</form>
<table id="table_example2">
<thead>
<tr>
<th width="30%">Email</th>
<th width="10%">Id</th>
<th width="10%">Phone</th>
<th width="10%">Total</th>
<th width="10%">Ip</th>
<th width="10%">Url</th>
<th width="10%">Time</th>
<th width="10%">ISO Date</th>
<th width="10%">UK Date</th>
</tr>
</thead>
<tbody>
<tr>
<th>devo@flexomat.com</th>
<td>66672</td>
<td>941-964-8535</td>
<td>$2482.79</td>
<td>172.78.200.124</td>
<td>http://gmail.com</td>
<td>15:10</td>
<td>1988/12/14</td>
<td>14/12/1988</td>
</tr>
<tr>
<th>henry@mountdev.net</th>
<td>35889</td>
<td>941-964-9543</td>
<td>$2776.09</td>
<td>119.232.182.142</td>
<td>http://www.gmail.com</td>
<td>3:54</td>
<td>1974/1/19</td>
<td>19/1/1974</td>
</tr>
<tr>
<th>christian@reno.gov</th>
<td>60021</td>
<td>941-964-5617</td>
<td>$2743.41</td>
<td>167.209.64.181</td>
<td>http://www.dotnet.ca</td>
<td>10:58</td>
<td>2000/3/25</td>
<td>25/3/2000</td>
</tr>
<tr>
<th>muffins@donuts.com</th>
<td>17927</td>
<td>941-964-9511</td>
<td>$2998.18</td>
<td>210.214.231.182</td>
<td>http://google.se</td>
<td>21:22</td>
<td>1993/1/24</td>
<td>24/1/1993</td>
</tr>
<tr>
<th>muffins@reno.gov</th>
<td>76375</td>
<td>941-964-2757</td>
<td>$1836.09</td>
<td>220.222.93.171</td>
<td>http://www.samba.org</td>
<td>15:22</td>
<td>1988/4/4</td>
<td>4/4/1988</td>
</tr>
<tr>
<th>mendez@gmail.com</th>
<td>45834</td>
<td>941-964-2575</td>
<td>$2805.46</td>
<td>228.170.245.253</td>
<td>http://flexomat.com</td>
<td>11:31</td>
<td>1975/12/12</td>
<td>12/12/1975</td>
</tr>
<tr>
<th>dev@gmail.com</th>
<td>20022</td>
<td>941-964-4967</td>
<td>$3296.54</td>
<td>175.248.70.240</td>
<td>http://www.flexomat.com</td>
<td>4:27</td>
<td>2002/7/3</td>
<td>3/7/2002</td>
</tr>
<tr>
<th>foo@polyester.se</th>
<td>55977</td>
<td>941-964-745</td>
<td>$2953.73</td>
<td>222.114.227.156</td>
<td>http://www.donuts.com</td>
<td>23:49</td>
<td>1977/8/4</td>
<td>4/8/1977</td>
</tr>
<tr>
<th>adam@aftonbladet.se</th>
<td>38867</td>
<td>941-964-6302</td>
<td>$1949.27</td>
<td>116.241.143.196</td>
<td>http://flexomat.com</td>
<td>23:35</td>
<td>1995/7/27</td>
<td>27/7/1995</td>
</tr>
<tr>
<th>devo@donuts.com</th>
<td>51426</td>
<td>941-964-1234</td>
<td>$1067.00</td>
<td>88.96.149.82</td>
<td>http://www.polyester.se</td>
<td>15:17</td>
<td>1986/1/5</td>
<td>5/1/1986</td>
</tr>
<tr>
<th>henry@samba.org</th>
<td>40859</td>
<td>941-964-4856</td>
<td>$3401.19</td>
<td>68.152.250.74</td>
<td>http://www.flexomat.com</td>
<td>4:36</td>
<td>1990/3/7</td>
<td>7/3/1990</td>
</tr>
<tr>
<th>found@dotnet.ca</th>
<td>23986</td>
<td>941-964-2686</td>
<td>$1393.52</td>
<td>98.102.181.138</td>
<td>http://lostnfound.org</td>
<td>5:51</td>
<td>1993/7/22</td>
<td>22/7/1993</td>
</tr>
<tr>
<th>carl@fish.org</th>
<td>73392</td>
<td>941-964-5792</td>
<td>$3876.04</td>
<td>246.234.182.243</td>
<td>http://www.google.se</td>
<td>6:52</td>
<td>1984/7/14</td>
<td>14/7/1984</td>
</tr>
<tr>
<th>found@mountdev.net</th>
<td>03519</td>
<td>941-964-1599</td>
<td>$1176.48</td>
<td>104.212.122.177</td>
<td>http://donutsx.com</td>
<td>18:52</td>
<td>2000/8/6</td>
<td>6/8/2000</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.quicksearch.js"></script>
<script type="text/javascript">
$(function(){
$('input#id_search2').quicksearch('table#table_example2 tbody tr', {
'delay': 300, // หน่วงเวลาการทำงาน ในที่นี้กำหนด 300 มิลลิวินาที
/* 'selector': 'th',*/ // กำหนด หากต้องการหาเฉพาะ ในคอลัมน์ที่ต้องการ
'stripeRows': ['odd', 'even'], // กำหนดการสลับสี ของแถวในตารางด้วย css class
'loader': 'span.loading', // ส่วนสำหรับกำหนด ข้อความ loading ในที่นี่คือ span ที่มี class เท่ากับ loading
'bind': 'keyup click', // เงื่อนไข event เมื่อคลิก หรือพิมพ์ที่ช่องค้นหา
'show': function (){ //
this.style.color = '';
},
'hide': function () { // สีของข้อความในแถวที่ไม่ตรงเงื่อนไขการค้นหา
this.style.color = '#ccc';
},
'prepareQuery': function (val) {// คืนค่ารูปแบบ pattern ของ Regular Expression สำหรับตรวจสอบ
return new RegExp(val, "i");
},
'testQuery': function (query, txt, _row) { // คืนค่า ตรวจสอบ แถวที่มีค่า ตามข้อมูลที่ค้นหา
return query.test(txt);
}
});
// val คือ ค่าของข้อมูลใน textbox เพื่อนำไปใช้จัดรูปแบบ pattern
// query คือ ค่ารูปแบบ pattern ของ Regular Expression
// txt คือข้อความทั้งหมดในแต่ละแถวในตาราง
// _row คือ Object ของ แถว (tr) ทั้งหมดในแต่ละแถวในตาราง
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
26 Mar 09 ฟังก์ชัน php แบ่งหน้าแต่งด้วย css อ่าน 6112 06 Jan 09 บวกวันใน javascript ด้วยฟังก์ชัน day add อย่างง่าย อ่าน 3915 03 Sep 10 จัดรูปแบบ url ลิ้งค์ link ด้วย เทคนิค php ได้อย่างง่าย อ่าน 2537 18 Mar 10 การเก็บข้อมูลวันที่ ในฐานข้อมูล กับคำสั่ง sql ในการค้นหา อ่าน 4785 19 Oct 08 คำสั่ง SQL functions อ่าน 4491 26 Oct 08 เช็ค browser ด้วย javascript ได้ทั้ง IE Firefox Opera Chrome อ่าน 4111 21 Aug 10 เริ่มใช้ และ ประยุกต์ CKEditor ให้ใช้งานง่าย เต็มความสามารถ อ่าน 3608 04 Jun 09 สร้างเมนูย่อย ให้กับข้อความ เมื่อนำเม๊าท์ไปชี้ mouseover ด้วย css และ jquery อย่างง่าย อ่าน 7027 15 Sep 10 สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์ อ่าน 3832 18 Aug 10 ใช้ php ดึงรูปภาพ จากโฟลเดอร์ มาแสดง พร้อม เทคนิค แบ่งหน้า อ่าน 4736 27 Dec 10 การสร้าง ajax dictionary จาก longdo ด้วย jQuery อ่าน 2772 07 Jun 09 กำหนดรายการใน listbox ที่ 2 จากเงื่อนไขการเลือก listbox ที่ 1 ด้วย ajax ใน jquery อย่างง่าย อ่าน 5731 22 Apr 10 ประยุกต์ tooltip มากกว่า 1 ตัวใน ฟอร์ม ด้วย jQuery อ่าน 5185 29 Mar 09 ทบทวนการตัดข้อความด้วย PHP อ่าน 3920 04 Nov 10 การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON() อ่าน 3389 27 Aug 10 เทคนิค jQuery สร้าง preloading page หรือ loading image ก่อนแสดงหน้าเว็บ อ่าน 4808 18 Mar 11 ทบทวน htaccess สำหรับ ให้ url เว็บมี www ด้านหน้าเสมอ อ่าน 1285 08 Feb 12 Google map API v.3 กับ jQuery ลากจุดหา ชื่อตำแหน่ง และ พิกัด ค่า latitude longitude อ่าน 322 26 Dec 10 แนะนำ PHP Simple HTML DOM Parser สำหรับ ดึงข้อมูล เฉพาะส่วนที่ต้องการ อ่าน 2917 09 Aug 10 ประยุกต์ jQuery UI ปฏิทิน Datepicker แสดงภาษาไทย และใช้ ปี พ.ศ. อ่าน 9078