Remove case sensitivity in a JS search

Question

I have a list on a page and a search bar that searches and filters the list as the user types. At the moment the input has to be all lowercase (which I've added myself). How can I remove all case sensitivity from the search string? For example if I search for teST the result for Test would still appear.

var list = $("table.ms-listviewtable");
var listItems = $("table.ms-listviewtable tr:not(.ms-viewheadertr)"); 
var input = $("input#filterInput");

input.keyup(function() {
  listItems.each(function() {
    var text = $(this).text();
    var text = $(this).text().toLowerCase();
    if (text.indexOf(input.val()) != -1) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

This worked, thanks very much! Will also mark the below as correct. — Celias, Aug 01 '19 at 09:15
Please cache the input val. Also I suggest to use toggle: `input.on("input",function() { var val = $(this).text().toLowerCase(); listItems.each(function() { var text = $(this).text().toLowerCase(); $(this).toggle(text.indexOf(val)!=-1); }) })` — mplungjan, Aug 01 '19 at 09:23

score 0 · Accepted Answer · answered Aug 01 '19 at 09:11

0

Just use toLowerCase on input.val() as well as text.

if (text.indexOf(input.val().toLowerCase()) != -1) {...}

Also note you can use includes instead of indexOf on newer browsers:

if (text.includes(input.val().toLowerCase())) {...}

answered Aug 01 '19 at 09:11

Jack Bashford

43,180
11
50
79

But cache input.val() – mplungjan Aug 01 '19 at 09:12
What do you mean @mplungjan? – Jack Bashford Aug 01 '19 at 09:15
@JackBashford : means to keep the value in a variable..... but not necessary in this case since it's only using once – Pranav C Balan Aug 01 '19 at 09:18
`input.on("input",function() { var val = $(this).text().toLowerCase(); listItems.each(function() { var text = $(this).text().toLowerCase(); $(this).toggle(text.indexOf(val)!=-1); }) })` or `=== 0` from match from start – mplungjan Aug 01 '19 at 09:31
@PranavCBalan it is used in each test in the loop – mplungjan Aug 01 '19 at 09:32
@mplungjan oops i d'dn't noticed that, ... then it's better to keep in a variable outside the each – Pranav C Balan Aug 01 '19 at 09:46

Rohit.007 · Answer 2 · 2019-08-01T09:37:04.983

0

You can also use the .match method

var list = $("table.ms-listviewtable");
var listItems = $("table.ms-listviewtable tr:not(.ms-viewheadertr)"); 
var input = $("input#filterInput");

input.keyup(function() {
  let inputVal = input.val().toLowerCase();
  listItems.each(function() {
    if($(this).text().toLowerCase().match(inputVal)){
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Aug 01 '19 at 09:37

answered Aug 01 '19 at 09:17

Rohit.007

3,414
2
21
33

Cache input val and toggle – mplungjan Aug 01 '19 at 09:22
@mplungjan: did you mean to move the `input.val()` outside the iterator? – Rohit.007 Aug 01 '19 at 09:26
`input.on("input",function() { var val = $(this).text().toLowerCase(); listItems.each(function() { var text = $(this).text().toLowerCase(); $(this).toggle(text.indexOf(val)!=-1); }) })` or `=== 0` to match from start – mplungjan Aug 01 '19 at 09:27
Yes, that was the optimized way, corrected!!! – Rohit.007 Aug 01 '19 at 09:27
1

Upvoted, many thanks! – Celias Aug 01 '19 at 09:38

Remove case sensitivity in a JS search

2 Answers2