Search for an item in a list using jquery .filter()

Question

I'm trying to input an input that looks into my list and returns the result below.

This is my list

<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>

Searching online, I found this feature but I can not adopt it in my case because I do not want to change the current list, but that only the search result is reproduced below.

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

Solution 1

You need to select every element doesn't contain value using .filter() then hide them.

$("#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>

Solution 2

Please try with below code snippets: fiddle Link:

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

});

Solution 3

In code below, I have not used filter or for each. Please look at it (you can check or change it online). This trick can be useful in many cases:

<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>

And its 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"
        });
    });
});

Excuse me! I'm typing with my mobile phone and I don't have access to the code tools of stackoverflow editor. You can test it from above fiddle.

Solution 4

this solution would be helpful

var types = ['type1','type2'];

var list = [{'tite':'type11','type':'type1'},{'tite':'type12','type':'type1'},{'title':'type21','type':'type2'},{'title':'etc','type':'alaki'}];

list.filter(c=> types.includes(c.type));

[{"tite":"type11","type":"type1"},{"tite":"type12","type":"type1"},{"title":"type21","type":"type2"}]

View more solutions

Comments

[Admin]

If I want to completely hide the line? Do I have to replace $ ("# list1 p") with $ ("# list1 li")? As my list is formed like this 'code' <li id = "1" class="list-group-item d-flex justify-content-between align-items-center"> <p id = "elem1"> Carne </p> <button id = "top" class="badge badge-primary badge-pill">TOP</button> <button id = "mod" class="badge badge-primary badge-pill" data-toggle="modal" data-target="#myModal">Mod</button> <button id = "canc" class="badge badge-primary badge-pill">X</button> </li>

[Mohammad]

@Benix89 Yes, $("# list1 li") select li contain ps

[Admin]

I tried and it does not go $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = this.value.toLowerCase().trim(); $("#lista1 li").show().filter(function() { return $(this).text().toLowerCase().trim().indexOf(value) == -1; }).hide(); }); });

[Admin]

No, the result does not meet my requirements. I want only the reference <li> to appear. Error with $("#lista1 *") ibb.co/fQSCRz

[Admin]

Let us continue this discussion in chat.

[Admin]

No, the result does not meet my requirements. I want only the reference <li> to appear. Error with $("#lista1 *") ibb.co/fQSCRz

[Hassan Sadeghi]

I don't have $("#lista1 *") in whole of my code, but if i understand your requirement, which described in your comment, please look at the updated method in this fiddle and tell me (if that was what you want) to update current answer :)

[Admin]

Show this jsfiddle.net/cq7o8h6g/3 Add more items and do a search and check the search result