Searching using contains case insensitive

by Michel Plungjan

HTML

<input type="text" id="find_question" />
<ul id="leftSection">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend metus sit amet nisi commodo, vel commodo nisi pellentesque. Nullam ac quam fermentum, tincidunt turpis et, pulvinar velit. Sed feugiat eleifend purus sed accumsan. Nam ullamcorper bibendum consectetur. Integer adipiscing faucibus pellentesque. Quisque et urna sed mauris posuere pulvinar ut nec sem. Donec id nulla metus. Phasellus at diam a nisi aliquet rhoncus id ut felis. Cras scelerisque mollis massa, ut congue neque.</li>
<li>Nunc lacinia lacinia ante sed luctus. Suspendisse porttitor risus a fermentum aliquet. Vivamus congue nibh eget orci porta, quis tincidunt sem tristique. Nullam ut mollis nulla. Morbi ut felis justo. Cras imperdiet suscipit scelerisque. Quisque tempor felis risus, ut laoreet neque lobortis at. Duis luctus pretium facilisis. Etiam porta nisl mi, at sodales ligula mattis a. Etiam malesuada turpis a ornare hendrerit. Integer vulputate dolor in nibh porttitor, fermentum porttitor augue mattis. Duis lacinia enim ut ante bibendum ullamcorper. Praesent sed lacinia tortor. Nunc ornare mollis vulputate.</li>
<li>Aenean lobortis, nibh id lacinia gravida, dui odio ornare nisi, malesuada varius purus arcu quis nunc. Vivamus non ultrices arcu. Maecenas id leo egestas, condimentum libero at, tincidunt turpis. Praesent aliquet ac arcu eu viverra. Aliquam quis velit facilisis, vehicula augue et, porttitor massa. Morbi in sodales tortor. Mauris sollicitudin tortor ac metus interdum, et egestas sem fermentum. Vivamus in convallis enim. Donec velit velit, euismod at mattis a, auctor at urna. Mauris id gravida mi. Vivamus faucibus risus nulla, eget ullamcorper ipsum interdum nec. Pellentesque at condimentum odio, sed lacinia massa. Nulla erat arcu, ullamcorper eleifend lacus vel, sagittis feugiat nisl. Vestibulum sodales purus eget tortor viverra, vitae adipiscing risus lacinia. Maecenas hendrerit fermentum mauris, in...

JavaScript

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

$(function() {
    $('#find_question').on("keyup", function() {
    var searchWord = $(this).val();
    $('#leftSection li').hide();
    if (searchWord.length >= 0) {
      $('#leftSection li:containsIgnoreCase("'+searchWord+'")').show();
    }
  });
});