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