css
<style> li { list-style: none; } </style>html
<body> 关键字:<input type="text" /> <ul> </ul> </body>script
<script> $(function() { //将数组内容显示到ul var data = [ 'Head First HTML与CSS', 'JavaScript高级程序设计', 'JavaScript DOM编程艺术', '高性能网站建设进阶指南', '高性能网站建设指南', 'Web前端黑客技术揭秘', 'JavaScript权威指南', '精通CSS', '编写可维护的JavaScript', "高性能JavaScript" ]; var i = 0; console.log(data[0]); $(data).each(function() { $("ul").append("<li>" + data[i] + "</li>") i++; }); jQuery.expr[':'].contains = function(a, i, m) {//去除contains大小写 return jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; }; $("input").change(function() { if($("input:text") == '') { //如果为空，全部显示 $(li).show(); } //trim()删除字符串开始和末尾的空格 $("li:contains(" + $("input:text").val().trim() + ")").show(); //选择所有包含 $("input:text") 的 <li> 元素 $("li:not(:contains(" + $("input:text").val().trim() + "))").hide(); //将除了包含 $("input:text") 的 <li> 元素的其他元素隐藏 //选取除了 :contains(" + $("input:text").val().trim() + ")元素以外的所有 <li> 元素： //第二中方法 //$("li").hide().filter(":contains("+ $("input:text").val().trim() +")").show(); //隐藏所有的li，并且把包含 $("input:text") 的 <li> 元素显示 //filter()返回带有类名":contains("+ search_input.val().trim() +") 的所有 <li> 元素： }) }) </script>