Question

我一直致力于此计划，允许用户通过在输入字段中输入此人的姓名来搜索人员。到目前为止，我已经完成了我想要的东西，除非我不确定如何搜索一个人的名字，即使用户输入小写的名字。例如：如果用户输入亨利，我仍然希望我的程序找到那个人并突出显示该人的姓名。对此有何帮助？先谢谢你！

这是我的代码笔： 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

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

1 个答案: