make a search box case insensitive

Question

$('#asearch').on('input', function(){
 let a = $(this).val();
 $('.title').hide();
 $('.title:contains(' + a + ')').show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = 'search' class='asearch' id='asearch' placeholder='Search'>
<div class='title'>loRem</div>
<div class='title'>IpsuM</div>

I want to get the first title visible if lor is typed inside the search box and the second title if i is typed i.e. want the search box to be case insensitive.

Any help?

score 1 · Answer 1 · answered Aug 02 '19 at 06:32

You can modify the .contains filter to be case insensitive or create your own selector.

 jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};


$('#asearch').on('input', function(){
 let a = $(this).val();
 $('.title').hide();
 $('.title:contains(' + a + ')').show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = 'search' class='asearch' id='asearch' placeholder='Search'>
<div class='title'>loRem</div>
<div class='title'>IpsuM</div>

score 1 · Accepted Answer · answered Aug 02 '19 at 06:32

:contains selector in jquery is case sensitive. You can use regex with filter()

$('#asearch').on('input', function() {
  let a = $(this).val();
  $('.title').hide();
  $('.title').filter(function() {
    return new RegExp(a, 'i').test($(this).text())
  }).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='search' class='asearch' id='asearch' placeholder='Search'>
<div class='title'>loRem</div>
<div class='title'>IpsuM</div>

make a search box case insensitive

2 Answers2