javascript - 如何在 HTML 列表中搜索元素？

Question

我一直在开发这个程序，该程序允许用户通过在输入字段中键入人员姓名来搜索人员。到目前为止，我已经完成了我想要的，除了我不确定如何仍然搜索一个人的名字，即使用户输入小写的名字。例如:如果用户输入 henry，我仍然希望我的程序查找该人并突出显示该人的名字。请问对此有什么帮助吗？提前谢谢您!

这是我的代码笔: http://codepen.io/HenryGranados/pen/YqQOwM

这是我的代码:

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

在js中添加

 $.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