HTMLリストの要素を検索する方法は？

Question

私はこのプログラムに取り組んでおり、ユーザーは入力フィールドに人の名前を入力して人を検索することができます。これまでのところ私は、ユーザーが小文字で名前を入力したとしても、人の名前を検索する方法がわからないことを除いて、自分が望むものを達成しました。たとえば、ユーザーがhenryと入力した場合、私のプログラムはその人を探してその人の名前を強調したいと思うでしょう。これについての助けてください？先進的でありがとう！

ここに私のコードのペンです：http://codepen.io/HenryGranados/pen/YqQOwM

は、ここに私のコードです：jsの中

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

Answer 1

、

を追加します0

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

は、変更あなたのul li:containsからul li:containsIgnoreCase

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

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