1

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?

aymanP_
  • 25
  • 3
  • 1
    Possible duplicate of [Case-insensitive attribute-value selector with Jquery](http://stackoverflow.com/questions/5755722/case-insensitive-attribute-value-selector-with-jquery) – Sherif Ahmed Feb 01 '17 at 16:20
  • Possible duplicate of [Case insensitive jQuery attribute selector](http://stackoverflow.com/questions/19465157/case-insensitive-jquery-attribute-selector) – Aᴍɪʀ Feb 01 '17 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 Feb 01 '17 at 16:22
  • Beyond the answers marked as duplicated, can you change how the html is generated? ie when you generate `
     – freedomn-m Feb 01 '17 at 17:31
  • @freedomn-m , thabk you for the idea, u saved my day – aymanP_ Feb 01 '17 at 21:38

1 Answers1

3

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();
ibrahim mahrir
  • 31,174
  • 5
  • 48
  • 73
  • It didn't work , about '.filter' , it's the class of the full list, i hide it to show only the search result – aymanP_ Feb 01 '17 at 16:32