搜索框自动检索

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>struts</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

</head>

<body>
名字:<input id="seach" />
<br/><br/>
<div id="div"></div>

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var user=[{"id": 1, "name": "张三","age":"25"},
{"id": 2, "name": "李四","age":"35"},
{"id": 3, "name": "王五","age":"20"}];
$(document).ready(function() {
var seach = $("#seach");
seach.keyup(function (event) {
var seachText = $("#seach").val();
if (seachText != "") {
var tab = "<div>查询结果:</div>";
$.each(user, function (id, item) {
if (item.name.indexOf(seachText) != -1) {
tab += "<div>"+ item.name + "</div>";
}
});
tab += "</table>";
$("#div").html(tab);
tab = "<div>123</div>";
} else {
$("#div").html("");
}
});
})
</script>
</body>
</html>
posted @ 2017-07-20 11:05  zc_boy  阅读(365)  评论(0编辑  收藏  举报