2

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();
    }
  });
});
3
  • 2
    if (text.indexOf(input.val().toLowerCase()) != -1) Aug 1, 2019 at 9:09
  • 1
    This worked, thanks very much! Will also mark the below as correct.
    – Celias
    Aug 1, 2019 at 9: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 1, 2019 at 9:23

2 Answers 2

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())) {...}
6
  • But cache input.val()
    – mplungjan
    Aug 1, 2019 at 9:12
  • What do you mean @mplungjan? Aug 1, 2019 at 9:15
  • @JackBashford : means to keep the value in a variable..... but not necessary in this case since it's only using once Aug 1, 2019 at 9: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 1, 2019 at 9:31
  • @PranavCBalan it is used in each test in the loop
    – mplungjan
    Aug 1, 2019 at 9:32
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>

5
  • Cache input val and toggle
    – mplungjan
    Aug 1, 2019 at 9:22
  • @mplungjan: did you mean to move the input.val() outside the iterator?
    – Rohit.007
    Aug 1, 2019 at 9: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 1, 2019 at 9:27
  • Yes, that was the optimized way, corrected!!!
    – Rohit.007
    Aug 1, 2019 at 9:27
  • 1
    Upvoted, many thanks!
    – Celias
    Aug 1, 2019 at 9:38

Not the answer you're looking for? Browse other questions tagged or ask your own question.