پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
بوت استرپ ۴ مولفه ای ندارد که امکان جستجو کردن (filtering) را داشته باشد.
با این حال میتوانیم از jQuery برای جستجوی عناصر استفاده نماییم.
در این مطلب نحوه استفاده از ویژگی filtering در بوت استرپ را به شما آموزش میدهیم.
با عرض سلام خدمت شما همراهان عزیز وب سایت پرنیان طرح
در این مبحث ویژگی filtering در بوت استرپ را آموزش میدهیم.
Filter Tables :
در این مثال قصد داریم درون جدول یک مقدار برای نام ، نام خانوادگی یا ایمیل را جستجو نماییم برای این منظور در قسمت ورودی باید چیزی تایپ نمایید.
توضیح : ما برای جا به جایی از هر سطر جدول از jQuery استفاده میکنیم که آیا مقداری وجود دارد که با مقدار فیلد ورودی مطاقبت داشته باشد.
به همین ترتیب مقدار را بر اساس جستجو پیدا میکنیم و نمایش میدهیم
مثال :
[php]
<body>
<div class=”container mt-3″>
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class=”form-control” id=”myInput” type=”text” placeholder=”Search..”>
<br>
<table class=”table table-bordered”>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id=”myTable”>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r@test.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
<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>
</body>
[/php]
تصویر خروجی مثال بالا :
Filter Lists :
از ویژگی جستجو کردن در لیست ها استفاده نمایید برای اینکار چیزی در قسمت ورودی تایپ کنید تا در لیست جستجو کند و مقدار را پیدا کند.
[php]
<body>
<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>
</body>
[/php]
تصویر زیر خروجی مثال بالا خواهد بود :
Filter Anything :
برای هر المانی میتوانید از ویژگی فیلترینگ استفاده نمایید در مثال زیر برای جستجوی یک متن درون المان div استفاده کرده ایم.
مثال :
[php]
<body>
<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>
</body>
[/php]
تصویر مثال بالا :
