Filter đối tượng với query

Filter đối tượng với query

Ví dụ làm page kiếm kiếm javascript

<div id="sidebar-wrapper">
<div class="form-inline p-2">
<input class="form-control" id="input_filter" type="search" placeholder="Tìm kiếm..."/>
</div>   
<ul class="sidebar-nav " id="myList">   
    <li><a href="/a"> Sự kiện Form</a></li>
    <li><a href="/b"> Vòng lặp Each</a></li>
    <li><a href="/c"> Truy cập đối tượng Jquery</a></li>
    <li><a href="/d"> Tương tác thuộc tính Jquery</a></li>
    <li><a href="/e"> Thêm sự kiện đối tượng Jquery</a></li>
    <li><a href="/f"> Một số hàm dùng Jquery</a></li>
</ul>
</div>
<script>
$("#input_filter").on("keyup", function() {
    var value = $(this).val().toLowerCase(); // lấy giá trị nhập vào ô tìm kiếm
  
// lặp tất cả các đối tượng trong thẻ myList
   $("#
myList li").filter(function() {  
           $(this).toggle( $(this).text().toLowerCase().indexOf(value) > -1 )
   }); //
myList
}); //input_filter
</script>

Viết dạng chi tiết

<script>
$("#input_filter").on("keyup", function() {
    var value = $(this).val().toLowerCase(); // lấy giá trị nhập vào ô tìm kiếm
  
// lặp tất cả các đối tượng trong thẻ myList
   $("#
myList li").filter(function() {  
           let text_get=$(this).find(".TenClass / #TenID").text();
           $(this).toggle(
text_get.toLowerCase().indexOf(value) > -1 )
   }); //
myList
}); //input_filter
</script>

* Tìm kiếm so sánh hoặc (or)

     let get_ten=$(this).find(".item_tenhanghoa").text().toLowerCase();  
     let get_nhom=$(this).find(".item_nhom").text().toLowerCase(); 

     $(this).toggle(  get_ten.indexOf(value) > -1  ||  get_nhom.indexOf(value) > -1  )
 

 

 

Filter đối tượng với query