CODEWITHSUNDEEP
javascriptjqueryhtml
ch3t
ch3t

Reputation: 486

remove case sensitivity from search jquery

I want to remove case sensitivity from my search criteria. If I typed lower-case letter I want it to search through both lower-case and upper-case.

My plunker

$('#search').click(function(){
    $('.contact-name').hide();
    var txt = $('#search-criteria').val();
    $('.contact-name:contains("' + txt + '")').show();
});

Upvotes: 1

Views: 1659

Answers (2)

Mayank
Mayank

Reputation: 1392

Try something like this,

:contains is case sensitive therefore it is not working in your case

Try the FIDDLE

$('#search').click(function(){

    $('.contact-name').hide();
    var txt = $('#search-criteria').val().toLowerCase();
    $('.contact-name').each(function(i,n){
        var text = $(this).text().toLowerCase();
        if(text.indexOf(txt) > -1)
            $(this).show();
    });
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

The :contains selector is case sensitive by default. If you want to make it case insensitive you would need to implement your own logic using filter() to make both the text of the element and value to search for the same case. Something like this:

$('#search').click(function(){
    $('.contact-name').hide();
    var txt = $('#search-criteria').val();
    $('.contact-name').filter(function() {
        return $(this).text().toLowerCase().indexOf(txt.toLowerCase()) != -1;
    }).show();
});

Upvotes: 1

Related Questions