CODEWITHSUNDEEP
javascriptjquery
HenryDev
HenryDev

Reputation: 4953

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: http://codepen.io/HenryGranados/pen/YqQOwM

Here's my code:

HTML

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

<ul>
    <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>
</ul>
<div id = "info"></div>

Jquery

$(document).ready(function(){

 $('#search_name').keyup(function(){
    var name = $("#search_name").val();

    $("ul li").removeClass("miClase");
    $("#info").html("");

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

    }
});
$("#submit").click(function(){
    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);
    }
  });
});

Upvotes: 1

Views: 1524

Answers (1)

Rifky
Rifky

Reputation: 1484

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");
}

http://codepen.io/anon/pen/xVraPm

Upvotes: 1

Related Questions