แนะนำ การใช้งาน jQuery quicksearch plugin

11 February 2011 เขียนเมื่อ 11 ปีก่อน โดย Ninenik Narkdee

jquery plugin jquery quicksearch

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

รูปแบบการใข้งาน Quicksearch จะเป็นการอำนวยความสะดวกในการค้นหาข้อมูล จากรายการ
ข้อมูลทั้งหมดที่แสดงตั้งแต่ต้น โดย jQuery quicksearch plugin มีลูกเล่น และการปรับใช้งาน
ได้อย่างดี

สามารถดาวน์โหลด และศึกษาวิธีการใช้งาน เพิ่มเติมได้ที่
https://github.com/riklomas/quicksearch

ตัวอย่างการใช้งานอย่างง่าย

Email	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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ