Есть ли способ использовать javascript/jquery для поиска группы тегов li и сужения поиска вниз

Я искал по всему миру идеи о том, как это сделать. У меня есть меню DrillDown, которое в некоторых точках идет на шесть уровней (не мой выбор - это то, чего хочет клиент). Я создал XML-документ, в котором хранятся все эти элементы существует всего 106 различных параметров, которые пользователь может выбрать только в боковом меню (опять же, что хочет клиент). Я хочу создать окно поиска, которое позволит мне ввести имя одного из вариантов, и список будет уменьшаться, чтобы отображать только варианты со словом (словами), которое вводит пользователь.

Мой вопрос: Есть ли плагин, позволяющий это поведение?

Если нет Как выполнить поиск группы элементов li для текста?

Ответ 1

Для того, чтобы закодировать сами были бы достаточно просто, то JQuery ниже принимает строку из входного #inputString и перебирать список пунктов "уль Ли" и показать/скрыть в зависимости, если они соответствуют входной строки.

Вы можете изменить селектор "ul li", чтобы при необходимости содержать другие списки

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

Я ожидаю, что есть много плагинов, которые делают то же самое, дайте ему Google!

Ответ 2

Вы можете попробовать фильтровать с помощью contains селектора:

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

См. пример jsFiddle

Ответ 3

Как вы выполняете поиск группы элементов li для текста?

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

Ссылка: http://api.jquery.com/contains-selector/

Ответ 4

Используя пример детализации:

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

Это мое предложение:

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

Ответ 5

Вы можете попробовать использовать эту концепцию:

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

Ответ 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>