How to search for elements in a HTML List?

I have been working on this program that allows users to search for people by typing the person's name in the input field. So far I have accomplished what I wanted except that I'm not sure how to still search for a person's name even if the users types in a name in lower case. For example: If user types henry I would still want my program to look for that person and highlight the person's name. Any help on this please?. Thank you in advanced!

Here's my code pen:

Here's my code:


<input type="text" id = "search_name">
<input type = "submit" id = "submit" value = "Search">

    <li>Henry Melsh</li>
    <li>Mike Brown</li>
    <li>Peter Swop</li>
    <li>Henry Suartz</li>
    <li>Michael Avern</li>
    <li>Henry Gomez</li>
    <li>Peter tumbs</li>
<div id = "info"></div>



    var name = $("#search_name").val();

    $("ul li").removeClass("miClase");

    if($.trim(name) != ''){
        $("ul li:contains('"+name+"')").addClass("miClase");

    var name  = $("#search_name").val();

    if($("ul li:not(:contains('name'))")){
        $("#info").html("Could not be found");

    if($("ul li").hasClass("miClase")){
        $("#info").html("Found: "+ $(".miClase").length);

Answers 1

  • in js, add

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

    then change your ul li:contains to ul li:containsIgnoreCase

    if($.trim(name) != ''){
        $("ul li:containsIgnoreCase('"+name+"')").addClass("miClase");

Related Articles