Question

Trying to make this jQuery filter that uses .find case-insensitive.

For example, when the search = “cat” (no quotes) it will find “cat” but not “Cat” or “CAT”. Similarly, “Cat” finds “Cat” but not “cat”.

I suspect it’s something very basic but cannot figure it out so I’m reaching out here with my first post.

I have no control over the contents of the list items themselves so cannot modify anything there,

Thanks in advance for your help!

PS Please no catcalls for something probably pretty junior for you guys. 😉

  $("#filter").live("keyup", function (ev) {
    var $filter = $(this),
        keyCode = ev.keyCode || ev.which,
        search;

    if (keyCode === 27) { //ESC
      $filter.val("");
    }

    search = $(this).val();
    $("#results").find("li").each(function () {
      var $li = $(this);
      if (search === "") {
        $li.show();
      } else {
        if (_.include(service_names, search)) {
          $li.toggle($li.hasClass("items-" + search));
        } else {
          if ($li.text().search(search) > 0) {
            $li.show();
          } else {
            $li.hide();
          }
        }
      }
    });
 }); 

Answer 1

you want to make case insensitive searches. try using regex search(/string/i)

$("#filter").live("keyup", function (ev) {
    var $filter = $(this),
        keyCode = ev.keyCode || ev.which,
        search;

    if (keyCode === 27) { //ESC
      $filter.val("");
    }

    search = $(this).val() ;
    // added
    var search_regex = new RegExp(search, 'i');
    $("#results").find("li").each(function () {
      var $li = $(this);
      if (search === "") {
        $li.show();
      } else {
        if (_.include(service_names, search)) {
          $li.toggle($li.hasClass("items-" + search));
        } else {
          // changed here
          if (search_regex.test($li.text())) {
            $li.show();
          } else {
            $li.hide();
          }
        }
      }
    });
 });