用jQuery写关键字检索数据的案例(思路逻辑详解）
<style>
.box{
width: 300px;
height: 200px;；
margin: 0 auto;
border: 1px solid #ccc;
}
</style>
<script src="../jQuery/jquery-1.12.4.min.js">
</script>
</head>
<body>
<div class="box">
<span>关键字：</span><input type="text">
<ul>
</ul>
</div>
<script>
var data = [
'Head First HTML与CSS','JavaScript高级程序设计',
'JavaScript DOM编程艺术','高性能网站建设进阶指南',
'高性能网站建设指南','Web前端黑客技术揭秘',
'JavaScript权威指南',
'精通CSS','编写可维护的JavaScript',
'高性能JavaScript'
];
$('input').change(function(){
var temp = [];
for(var i = 0; i<data.length;i++){
if(data[i].toLocaleLowerCase().indexOf($('input').val().toLocaleLowerCase())!==-1){
temp.push(data[i]);
}
}
$("ul").html("");
if(temp.length!=0){
for (var i = 0; i < temp.length; i++) {
$("<li>"+temp[i]+"</li>").appendTo($("ul"));
}
}else{
$("<li>无</li>").appendTo($('ul'));
}
})
</script>
首先我们要搜索，就必须有一个输入的文本框,同时赋予文本框一个id，让后面JQuery能后获取得到文本框里的值，而后创建一个ul，用来存放检索后的结果，小编急于求成，所以就没有赋予
- 的id值了。
以上就是小编认为的最基本的构件了，接下来要写一个盒子（div)将里面的内容组装起来，作为盒子必须要有宽高与边框，为了看着舒服，我还在css写了个margin：0 auto让盒子自动居中，就这样最基本的布局就完成了。
划重点
逻辑层部分：
- 我们先通过$(‘input’)获取到文本框这一对象，然后用利用change()函数来监听文本框的变化，然后建立一个数组temp用来存放检索出来的数据。
- 通过for循环遍历原本的数据，再将每次拿到的字符串通过toLocaleLowerCase()函数将字符串转换为小写，然后通过indexOf()来检索是否有包含关键字，由于indexOf()对大小写敏感，所以我们必须将input里的值也转换为小写。
- 我们通过if来判断当检索的结果是否为-1，当结果不为-1时，代表遍历到的字符串有我们想要的值，就将遍历到的字符串放入数组temp中去。
- 我们要判断下temp里是否有符合检索的字符串，当有数据时我们要将其遍历渲染输出，没有的话，在页面输出无。这里我们通过temp数组的长度来做判断。
- 如何渲染到页面上呢，在这里我们通过appendTo()这也方法将值放于
- 中将其添至为ul的最后一个元素。
以上便是小编写这个功能的基本思路，菜鸟一枚,不足之处，希望大家海涵！！！
**
献上效果图
**