یکی از انتخاب های مهم در فرآیندهای طراحی سایت ، قراردادن قسمتی برای جستجو یا فیلترکردن نتایج برای کاربران است.
فرض کنید شما قصد طراحی یک صرافی آنلاین دارید ، تمامی رمز ارزها را در این لیست قراردادید. با طراحی کردن یک باکس برای فیلتر می توانید نتایج دلخواه کاربران را با جستجو کردن در اختیارشان قرار دهید.
فیلتر در بوت استرپ 4
به صورت مستقیم بوت استرپ 4 المانی برای فیلتر ندارد ، برای اینکه فیلتر بسازیم کافی است از jQuery برای ساخت المان فیلتر یا جستجو استفاده کنیم.
فیلتر کردن جدول
مجدد به مثال صرافی توجه کنید. تمامی رمز ارزها در جدول قرار دارند ، برای فیلتر کردن باید ردیف هایی که با مقادر وارد شده هماهنگ است نمایش داده شود.
قدم اول باید از jQuery برای ساخت یک حلقه ی جستجو استفاده کنیم. این حلقه مقدار وارد شده را دریافت می کند و تا انتهای جدول پیمایش می کند ، اگر هر ردیف مقدار برابر با مقدار داده شده را داشته باشد نمایش داده می شود.
با استفاده از مد toggle مقادیری که با مقدار وارد شده همخوانی ندارند را مخفی می کنیم . ( برای مخفی کردن display:none اضافه می شود . )
همچنین از مد toLowerCase() برای تبدیل کردن تمامی حروف ، به حروف کوچک استفاده می کنیم . ( برای مثال تفاوتی بین جستجو کردن “john” ، “John” و “JOHN” نیست.)
برای درک بهتر به قطعه کد زیر توجه کنید :
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> |
فیلتر کردن لیست
جستجوی موارد موجود در یک لیست ( بدون حساسیت به کوچک یا بزرگ بودن حروف ):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="container mt-3"> <h2>Filterable List</h2> <p>Type something in the input field to search the list for specific items:</p> <input class="form-control" id="myInput" type="text" placeholder="Search.."> <br> <ul class="list-group" id="myList"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> <li class="list-group-item">Fourth</li> </ul> </div> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myList li").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> |
فیلتر برای همه المان ها
جستجوی متن در داخل یک تگ div ( بدون حساسیت به کوچک یا بزرگ بودن حروف ):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="container mt-3"> <h2>Filter Anything</h2> <p>Type something in the input field to search for a specific text inside the div element with id="myDIV":</p> <input class="form-control" id="myInput" type="text" placeholder="Search.."> <div id="myDIV" class="mt-3"> <p>I am a paragraph.</p> <div>I am a div element inside div.</div> <button class="btn">I am a button</button> <button class="btn btn-info">Another button</button> <p>Another paragraph.</p> </div> </div> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myDIV *").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> |
پیشنهاد می کنم برای دریافت اطلاعات بیشتر و دیدن مثال های بیشتر به سایت getbootstrap مراجعه فرمایید.
همچنین از طریق دوره رایگان بوت استرپ 4 هم می توانید سایر قسمت های آموزش بوت استرپ را ببینید.
