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

我一直在研究这个程序，允许用户通过在输入字段中输入人的姓名来搜索人。到目前为止，我已经完成了我想要的任务，但是我不知道如何仍然搜索一个人的姓名，即使用户输入名字的小写。例如：如果用户键入henry，我仍然希望我的程序查找该人并突出显示该人的姓名。对此有任何帮助吗？先进的谢谢！如何搜索HTML列表中的元素？

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

来源

2016-03-28 HenryDev

https://jsfiddle.net/potherca/ympBL/ –

@ArunPJohny我要完成我的计划，你的链接不帮助 – HenryDev

@ArunPJohny加y程序已经做了搜索部分。我只是想能够仍然搜索，即使用户输入小写字母的名字 – HenryDev

在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

来源

2016-03-28 05:06:07 Rifky

感谢您的帮助！ – HenryDev

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

回答

相关问题