Case insensitive search with jQuery

Question

I've used the script below to search through a table to display the results matching the user input. If you type in a capital 'K' and the desired result starts with a lower 'k', the result simply won't show as it does not match exactly the user input. How do I select the .value() case insensitive?

$("#search_input").keyup(function() {
  var value = this.value;
  $("#table").find(".table_row").each(function(index) {
    if (!index) return;
    var id = $(this).find(".table_cell").first().text();
    $(this).toggle(id.indexOf(value) !== -1);
  });
});

Answer 1

Part of a script which you gave, compare strings as is. Its better to lowercase user input and text id of table cell in order to compare both results and then toggle what you need.

$("#content").keyup(function() {
  var value = this.value.toLowerCase();
  $("#table").find(".table_row").each(function(index) {
    if (!index) return;
    var id = $(this).find(".table_cell").first().text();
    if (id.toLowerCase().indexOf(value) !== -1) {
      $(this).toggle();
    }
  });
});

And one more thing to add. Just curious, why are you passing the result of string comparison to a toggle ? Toggle expect two optional parameters: duration and complete callback function. In case if you don't need to speed up or do something afterwards you just toggle it as is.

With no parameters, the .toggle() method simply toggles the visibility of elements

Answer 2

It was enough for me to simply use toLowerCase() for both the searchable elements and the user input, to compare the lower case values of both.

$("#search_input").keyup(function() {
  var value = this.value.toLowerCase();
  $("#table").find(".table_row").each(function(index) {
    if (!index) return;
    var id = $(this).find(".column-namelist").first().text();
    $(this).toggle(id.toLowerCase().indexOf(value) !== -1);
  });
});