|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد

ورود به حساب کاربری

در صورتی که کلمه عبور خود را بروزرسانی کرده اید با کلمه عبور وارد حساب کاربری خود شوید.

شماره همراه خود را وارد کنید

ورود و ادامه

فیلتر های jQuery

از jQuery  می توان برای فیلتر/جستجو عناصر مشخصی ، استفاده کرد.

 

فیلتر کردن جدول ها

اجرای یک جستجوی غیر حساس به حروف در آیتم های یک جدول :
مثال :

فیلتر جدول ها
 <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> 
مشاهده مثال


توضیحات مثال :
از jQuery  برای جستجو در هر سطر جدول استفاده کردیم تا اگر تطابق در مقادیر جدول با مقدار وارد شده در فیلد ورودی وجود داشت ، متوجه شویم. متد toggle ردیفی را که با متن ورودی جستجو مطابقت نداشته باشد ، پنهان می کند.  (display:none)
ما از متد toLowerCase() DOM برای تبدیل متن به حروف کوچک استفاده کردیم که جستجو را غیرحساس به حروف می کند. (این متد در زبان فارسی کارایی ندارد)


فیلتر کردن لیست ها

اجرای یک جستجوی غیر حساس به حروف در آیتم های یک جدول :
مثال :

فیلتر لیست ها
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
مشاهده مثال

 

فیلتر کردن همه عناصر

اجرای یک جستجوی غیر حساس به حروف در متن داخل یک عنصر div :

مثال :

فیلتر کردن همه عناصر
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
مشاهده مثال

 

 

نظر شما

مقالات و دروس

برای پروژه‌ی خود مشاوره رایگان بگیرید

طراحی سایت، توسعه نرم‌افزار، اتوماسیون و شبکه؛ با کارشناسان شرکت نرم‌افزاری وب مهراز در ارتباط باشید.

درخواست مشاوره

مقالات مرتبط

|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد