0

I know someone has created a thread about this, but it was case sensitive. Unfortunately, I am fairly new to the community and do not have the reputation to add a comment to that post. I was wondering if you guys could help me out.

Here is the link (Bootstrap 4 cards filtering with jQuery) and I am very thankful for Themes.guide for answering Christians question.

I am really stuck on trying to change the following to case insensitive.

Themes.guide's code can be found here

I was able to change the search input to all uppercase by adding: 

.toUpperCase() to $(this).val().

I have no Idea how to change the card-title to all uppercase so the search can become case insensitive.

Thank you in advance for the help!

IlGala
  • 3,331
  • 4
  • 35
  • 49
Silver Bullet
  • 1
  • 2

1 Answers1

0

Instead of using the :contains() function of jquery, it might be better to iterate over each title and perform the comparison in the loop callback.

$('#search').keyup(function (){
    $('.card').removeClass('d-none');
    var filter = $(this).val(); // get the value of the input, which we filter on

    /* Iterate over each title */
    $('.card-deck').find('.card .card-body h4').each(function(){
        var $this = $(this); //Assign alias to 'this' 
        if($this.text().toUpperCase() !== filter.toUpperCase()) 
            //If both uppercase values don't match
            $this.parent().parent().addClass('d-none');
    });
})
Jackson
  • 3,476
  • 1
  • 19
  • 29
  • Hello Jackson, Thank you for taking the time to answer my question. I tried your code and it did not seem to work, but you gave me another way of looking at this problem. Thanks again! – Silver Bullet Aug 17 '18 at 03:20