Có cách nào để sử dụng javascript/jquery để tìm kiếm một nhóm thẻ li và thu hẹp tìm kiếm xuống

Question

Tôi đã tìm kiếm trên web để có ý tưởng về cách thực hiện điều này. Tôi có DrillDown menu rằng tại một số điểm có sáu cấp độ sâu (không phải lựa chọn của tôi là khách hàng muốn) Tôi đã tạo một tài liệu xml chứa tất cả các mục này có tổng cộng 106 tùy chọn khác nhau mà người dùng có thể chọn menu bên một mình (một lần nữa những gì khách hàng muốn). Tôi muốn tạo một hộp tìm kiếm cho phép tôi nhập vào tên của một trong các lựa chọn và danh sách sẽ co lại để chỉ hiển thị các tùy chọn với từ mà người dùng nhập vào.

Câu hỏi của tôi Có plugin nào cho phép hành vi này không?

Nếu không Bạn tìm kiếm một nhóm các phần tử li cho văn bản như thế nào?

Answer 1

Để mã đó cho mình sẽ là khá đơn giản, jQuery dưới đây lấy một chuỗi từ i nput #inputString và sẽ lặp qua các mục danh sách "ul li" và hiển thị/ẩn tùy thuộc nếu chúng khớp với chuỗi đầu vào.

Bạn có thể thay đổi "ul li" selector để chứa danh sách khác nếu cần thiết

jQuery("#inputString").keyup(function() { 
    var filter = jQuery(this).val(); 
    jQuery("ul li").each(function() { 
     if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) { 
      jQuery(this).hide(); 
     } else { 
      jQuery(this).show() 
     } 
    }); 
}); 

Tôi hy vọng có nhiều plugin làm điều tương tự, cho nó một google!

Answer 2

Bạn có thể thử lọc theo contains selector:

var matches = $('ul#myMenu').find('li:contains(search string) '); 
$('li', 'ul#myMenu').not(matches).slideUp(); 
matches.slideDown(); 

Xem ví dụ trên jsFiddle

Answer 3

Làm thế nào để bạn tìm kiếm một nhóm các phần tử li cho văn bản?

var filteredLIS = $("li:contains('" + yourQuery + "')"); 

tham khảo: http://api.jquery.com/contains-selector/

Answer 4

Sử dụng mẫu Drilldown đây:

http://www.designchemical.com/lab/jquery-drill-down-menu-plugin/getting-started/ 

Đây là đề nghị của tôi:

$('#drilldown').find("a:contains('Product')"); 

Answer 5

Bạn có thể thử sử dụng khái niệm này:

$('.search').keyup(function(){ 
    if($(this).val().length > 0){ 
     var foundin = $('#drilldown').find('li a:contains("'+$(this).val()+'")'); 
    } 
}); 

Answer 6

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    // Start here: Search Service area via jQuery 
    window.filter = function(element) 
    { 
    var value = $(element).val().toUpperCase(); 
    $(".left_message > li").each(function() 
    { 
     if ($(this).text().toUpperCase().search(value) > -1){ 
     $(this).show(); 
     } 
     else { 
     $(this).hide(); 
     } 
    }); 
    } 
}); 
</script> 

<input type="text" placeholder="Enter text to search" onkeyup="filter(this);"> 

<ul role="tablist" class="left_message"> 
    <li><a href="#"><span>Anupk Kumar</span></a></li> 
    <li><a href="#"><span>Pradeep Kumar</span></a></li> 
    <li><a href="#"><span>Zahid Gani</span></a></li> 
    <li><a href="#"><span>Amitabh</span></a></li> 
    <li><a href="#"><span>Chandan Gupta</span></a></li> 
</ul> 



Result : Search Zahid , they return following output 

<ul role="tablist" class="left_message">`enter code here` 
    <li><a href="#"><span>Zahid Gani</span></a></li>  
</ul>