แนะนำ การใช้งาน jQuery quicksearch plugin
11 February 2011 By Ninenik Narkdeejquery plugin quicksearch jquery
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery plugin quicksearch jquery
ไปที่
Copy
รูปแบบการใข้งาน 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>
อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ
URL สำหรับอ้างอิง
Top
Copy