Поиск элемента в списке с помощью jquery .filter ()

Question

Я пытаюсь ввести ввод, который просматривает мой список и возвращает результат ниже.

Это мой список

<ul id="lista1" class="list-group"> 
    <li id = "1" class="list-group-item d-flex justify-content-between align-items-center">
        <p id = "elem1"> Carne </p>
        <p id = "elem2"> Pesce </p>
        <p id = "elem3"> Verdure </p>
    </li>
</ul>

Поиск в Интернете, я нашел эту функцию, но яне могу принять его в моем случае, потому что я не хочу изменять текущий список, но что только результат поиска воспроизводится ниже.

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#lista1 p").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1).indexOf()
    });
  });
});

Answer 1

Пожалуйста, попробуйте следующие фрагменты кода: fiddle Ссылка :

HTML Part:

      <input class="form-control" id="txtSearch" type="text">

        <li id = "1" class="list-group-item d-flex justify-content-between align-items-center">
  <p class="list-group-item" > Carne </p>
  <p class="list-group-item" > Pesce </p>
  <p  class="list-group-item" > Verdure </p>

</li>

Jquery Part:

$("#txtSearch").on('keyup', function() {
    var search = $(this).val().toLowerCase();
    //Go through each list item and hide if not match search

    $(".list-group-item").each(function() {
        if ($(this).html().toLowerCase().indexOf(search) != -1) {
            $(this).show();
        }
        else {
            $(this).hide();  
        }

    });
    $(".list-group-item:visible").each(function(index) {
         if(index == 0){
             $(this).css("border-top-left-radius", "10px");
             $(this).css("border-top-right-radius", "10px");
         }
         if(index == $(".list-group-item:visible").length - 1){
             $(this).css("border-bottom-left-radius", "10px");
             $(this).css("border-bottom-right-radius", "10px");
         }
     });

});

Answer 2

В приведенном ниже коде я не использовал filter или for each.Пожалуйста, посмотрите на это (вы можете проверить или изменить онлайн ). Этот трюк может быть полезен во многих случаях :

<input type="text" id="myInput"/>
<ul id="lista1" class="list-group"> 
    <li id = "1" class="list-group-item d-flex justify-content-between align-items-center">
        <p id = "elem1"> Carne </p>
        <p id = "elem2"> Pesce </p>
        <p id = "elem3"> Verdure </p>
    </li>
</ul>

И его js:

$(document).ready(function(){
    $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#lista1 p").css("display", function() {
            return this.innerText.toLowerCase().indexOf(value) > -1 ? "":"none"
        });
    });
});

Извините!Я набираю текст на своем мобильном телефоне, и у меня нет доступа к инструментам кода редактора stackoverflow.Вы можете проверить это сверху скрипкой.

Answer 3

Вы должны выбрать каждый элемент, не содержащий значения, используя .filter(), а затем скрыть их.

$("#myInput").on("keyup", function() {
  var value = this.value.toLowerCase().trim();
  $("#lista1 p").show().filter(function() {
    return $(this).text().toLowerCase().trim().indexOf(value) == -1;
  }).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput">
<ul id="lista1" class="list-group">
  <li id = "1" class="list-group-item d-flex justify-content-between align-items-center">
    <p id = "elem1"> Carne </p>
    <p id = "elem2"> Pesce </p>
    <p id = "elem3"> Verdure </p>
  </li>
</ul>