CODEWITHSUNDEEP
javascriptjquery
João Cunha
João Cunha

Reputation: 10307

Jquery - Search in <ul>

Hey guys I'm trying to search a <ul>

Basically as I'm writing it needs to hide/show the <li> elements that correspond.

HTML

<input id="searchUtil" type="search" placeholder="Pesquisa..."/>

<ul id="ulutilizadores" class="list-group">
   <li>**some code*</li>
</ul>

As of now I have this:

//#searchUtil is the <input> id
$('#searchUtil').on('keyup', function (e) {
    var searchText = $(this).val();


//#ulutilizadores is the <ul> id
    $('#ulutilizadores li').each(function () {
        var text = $(this).val();
        if (text.indexOf(searchText)) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

This isn't working. I've been searching but I don't really find some good answers. Can someone point me in the right direction?

Upvotes: 1

Views: 190

Answers (2)

Norrj
Norrj

Reputation: 114

Try this out. In this you search on exact the same text. Change to searchText.Contains(this.innerHTML) or something like that to get where the text contains in the list.

HTML: 

<ul id="ulutilizadores" class="list-group">
   <li>test</li>
   <li>test1</li>
</ul>

JQuery:

$('#searchUtil').change(function(){
    var searchText = $(this).val();
     $('#ulutilizadores li').each(function () {
        if(searchText !== this.innerHTML )
        {
            $(this).hide();
        }
         else
         {
             $(this).show();
         }
    });
});

JsFiddle

Upvotes: 0

loveNoHate
loveNoHate

Reputation: 1547

You had a slight error in your code

var text = $(this).val();

should be

var text = $(this).text();

in your case.

The .val() method is primarily used to get the values of form elements such as input, select and textarea. jQuery manual

Upvotes: 2

Related Questions