Czy istnieje sposób użycia javascript/jquery do przeszukiwania grupy znaczników li i zawężenia wyszukiwania

Question

Szukałem w całym Internecie pomysłów, jak to zrobić. Mam DrillDown menu, że w niektórych punktach idzie sześć poziomów głębokości (nie mój wybór jest to, czego klient chce) Stworzyłem dokument xml, który przechowuje wszystkie te elementy istnieje w sumie 106 różnych opcji, które użytkownik może wybrać tylko w menu boczne (ponownie to, czego chce klient). Chcę utworzyć pole wyszukiwania, które pozwoliłoby mi wpisać nazwę jednego z wyborów, a lista zmniejszyłaby się, pokazując tylko opcje ze słowem (słowami) wprowadzanym przez użytkownika.

Moje pytanie Czy istnieje wtyczka pozwalająca na takie zachowanie?

Jeśli nie Jak przeszukujesz grupę elementów LI dla tekstu?

Answer 1

Aby zakodować go samemu byłoby dość proste, jQuery poniżej pobiera ciąg od i nput #inputString i będzie iterować po elementach listy "ul li" i pokazać/ukryć w zależności od tego, czy pasują do łańcucha wejściowego.

Można modyfikować „ul li” wybieraka zawierać inne listy w razie potrzeby

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() 
     } 
    }); 
}); 

Spodziewam istnieje wiele wtyczek, które robią to samo, nadać mu google!

Answer 2

Można próbować filtrować według contains selektora:

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

Patrz przykład na jsFiddle

Answer 3

Jak wyszukać grupę elementów li na tekst?

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

referencyjny: http://api.jquery.com/contains-selector/

Answer 4

Korzystanie próbkę dodano opcję przeglądania tutaj:

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

To jest moja propozycja:

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

Answer 5

Można spróbować użyć tego pojęcia:

$('.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>