前台:<input type="text" name="">
<ul id="list">
</ul>
jq部分:var data = ["Head First HTML与CSS", "JavaScript高级程序设计", "JavaScript DOM编程艺术", "高性能网站建设进阶指南", "高性能网站建设指南", "Web前端黑客技术揭秘 ", "JavaScript权威指南", "精通CSS", "编写可维护的JavaScript ", "高性能JavaScript"]
$(function(){
$("input").change(function(){
var group = [];
for (var i = 0; i < data.length; i++) {
if(data[i].toLowerCase().indexOf($(this).val().toLowerCase())!== -1){
group.push(data[i]);
}
}
if(group.length!=0){
$("#list").html("");
for (var i= 0; i<group.length;i++) {
$("<li>"+group[i]+"</li>").appendTo("#list");
}
}else{
$("<li>无</li>").appendTo("#list");
}
})
})