Case Insensitive - Jquery Search System

Question

Good morning!

I have this code that searches inside a list <ul> <li>:

    $(function(){   

    $('input[type="text"]').keyup(function(){       

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

        $('.filter-task > li').each(function(){

            var currentLiText = $(this).text(),
                showCurrentLi = currentLiText.indexOf(searchText) !== -1;

            $(this).toggle(showCurrentLi);

        });

    });

});

I’m trying to take the case sensitive of jquery in the search, doing a search by google found this code:

    $.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

But I didn’t quite understand it, someone has something clearer on the subject, or if there’s some other way to get the case sensitive?

Answer 1

No need to use any such function, javascript has a native function to make everything high toUpperCase()

$(function(){   

    $('input[type="text"]').keyup(function(){       

        var searchText = $(this).val().toUpperCase();

        $('.filter-task > li').each(function(){

            var currentLiText = $(this).text().toUpperCase(),
                showCurrentLi = currentLiText.indexOf(searchText) !== -1;
      
            $(this).toggle(showCurrentLi);

        });

    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" >
<ul class="filter-task">
  <li>CACHORRO</li>
  <li>gato</li>
  <li>papagaio</li>
<ul>

Answer 2

so that the search is case-insensitive transform the search term and the element text into UPPERCASE or lowercase

$(function(){   

$('input[type="text"]').keyup(function(){       

    var searchText = $(this).val().toUpperCase();

    $('.filter-task > li').each(function(){

        var currentLiText = $(this).text().toUpperCase(),
            showCurrentLi = currentLiText.indexOf(searchText) !== -1;

        $(this).toggle(showCurrentLi);

    });

});

});