Case insensitive jQuery search filter

Question

I have had some help on a Jquery script which creates a searchable filter, The code can be seen here:

$('#search-keyword').on( "keyup", function(){ if($(this).val()){ var input = $(this).val(); $(".filter").hide(); $("div[data-destination*='"+ input +"']").show(); if(!$('.filter:visible').get(0)){ $(".filter").show(); } }else{ $(".filter").show(); } });

The trouble is, if there is the word “How” with an upper case “H” and I search “h”, it wont find it. How can I make this script case insensitive?

Possible duplicate of Case-insensitive attribute-value selector with Jquery — Sherif Ahmed
– Sherif Ahmed, Commented Feb 1, 2017 at 16:20
Possible duplicate of Case insensitive jQuery attribute selector — Aᴍɪʀ
– Aᴍɪʀ, Commented Feb 1, 2017 at 16:20
What is the html for this doing? you'd want to change the data attribute to something like [data-destination*='/"+input+"/gi'] I think. — Snowmonkey
– Snowmonkey, Commented Feb 1, 2017 at 16:22
Beyond the answers marked as duplicated, can you change how the html is generated? ie when you generate <div data-destination=... make it lowercase at the point it is generated. Then you only need to convert the input to lower and compare. — fdomn-m
– fdomn-m, Commented Feb 1, 2017 at 17:31

ibrahim mahrir · Accepted Answer · 2019-01-30 12:55:30Z

Replace this:

$(".filter").hide(); $("div[data-destination*='"+ input +"']").show();

with this:

$(".filter div[data-destination]").hide(); // You have to hide the elements (the divs you want to filter) not the container. $(".filter div[data-destination]").filter(function() { return $(this).data("destination").toLowerCase().indexOf(input.toLowerCase()) !== -1; }.show();

It didn't work , about '.filter' , it's the class of the full list, i hide it to show only the search result

Collectives™ on Stack Overflow

Case insensitive jQuery search filter

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related