我一直在开发这个程序,该程序允许用户通过在输入字段中键入人员姓名来搜索人员。到目前为止,我已经完成了我想要的,除了我不确定如何仍然搜索一个人的名字,即使用户输入小写的名字。例如:如果用户输入 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);
}
});
});
最佳答案
在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");
}
关于javascript - 如何在 HTML 列表中搜索元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36256181/