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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
jquery jquery plugin quicksearch

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



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

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

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

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





Tags:: jquery plugin quicksearch jquery







URL สำหรับอ้างอิง













Author
2021 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ