با سلام خدمت شما همراهان عزیز. در این قسمت از آموزش ویژه از سری آموزش های برنامه نویسی و طراحی وب قصد داریم تا توسط jquery و HTML یک جعبه جستجوی بسیار کاربردی به صورت زنده بسازیم.
فرض کنید که یک جدول همراه با تعدادی سطر داریم که مشخصات هر فرد را در خود ذخیره می کند. این جدول با کاملا استاتیک است و توسط HTML ساخته شده است. به این نکته توجه داشته باشید که این جدول در فریم ورک بوت استرپ ساخته شده است ولی این نکته در روند کار هیچ تاثیری ندارد.
کدهای HTML :
<!-- Search Box --> <div> <input type="text" class="form-control pull-right" style="width:20%" id="search" placeholder="Type to search table..."> </div> <!-- table of people --> <table class="table-bordered table pull-right" id="mytable" cellspacing="0" style="width: 100%;"> <thead> <tr role="row"> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>alireza Hataminia</td> <td>Iran</td> <td>Tehran</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td>Nemat Meshkani</td> <td>Iran</td> <td>Tehran</td> <td>30</td> <td>2009/10/09</td> <td>$1,200,000</td> </tr> <tr> <td>سمانه رضایی</td> <td>شیراز</td> <td>شیراز</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>محمد احمدی</td> <td>اهواز</td> <td>تهران</td> <td>41</td> <td>2012/10/13</td> <td>$132,000</td> </tr> <tr> <td>محسن جمشیدی</td> <td>مهندسی نرم افزار</td> <td>مشهد</td> <td>28</td> <td>2011/06/07</td> <td>$206,850</td> </tr> <tr> <td>Williamson j.</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td>Salman Khan</td> <td>Software Engineer</td> <td>London</td> <td>38</td> <td>2011/05/03</td> <td>$163,500</td> </tr> <tr> <td>Vinton Cerf</td> <td>Pre-Sales Support</td> <td>New York</td> <td>21</td> <td>2011/12/12</td> <td>$106,450</td> </tr> <tr> <td>Naveen Mishra</td> <td>Sales Assistant</td> <td>New York</td> <td>46</td> <td>2011/12/06</td> <td>$145,600</td> </tr> <tr> <td>Zohair Raza</td> <td>Engineer</td> <td>Dubai</td> <td>30</td> <td>2012/03/29</td> <td>$433,060</td> </tr> </tbody> </table>
iهمان طور که مشاهده می کنید یک <input> جهت ساخت سرچ باکس با id برابر search داریم. قسد داریم هنگامی که کاربر حرفی را در Search Box وارد کرد هر سطر از جدول که دارای چنین حرف یا کلمه ای نبود حذف شود. پس کدهای جیکوئری به شکل زیر نوشته می شود.
// Write on keyup event of keyword input element $(document).ready(function(){ $("#search").keyup(function(){ _this = this; // Show only matching TR, hide rest of them $.each($("#mytable tbody tr"), function() { if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1) $(this).hide(); else $(this).show(); }); }); });
در کدهای بالا روی رویداد keyup جعبه جستجو هر مقداری که توسط کاربر وارد می شود با هر سطر جدول مقاسیه شده و سطرهایی که دارای چنین کاراکتری نیستند مخفی یا hidden می شوند
