php动态网站搜索功能,jQuery实现动态搜索显示功能

本案例采用jQuery实现动态搜索显示功能，只要输入值就能立刻动态显示数据，不同于常规查询方法。

模拟效果如下：

、

2、

struts2

//数据源，json的格式.

var user=[{"id": 1, "name": "张三","age":"25"},

{"id": 2, "name": "李四","age":"35"},

{"id": 3, "name": "王五","age":"20"},

{"id": 4, "name": "老王","age":"20"},

{"id": 5, "name": "老张","age":"25"},

{"id": 6, "name": "李四","age":"35"},

{"id": 7, "name": "王五","age":"20"},

{"id": 8, "name": "老王","age":"20"},

{"id": 9, "name": "abc","age":"25"},

{"id": 10, "name": "李b四","age":"35"},

{"id": 11, "name": "125","age":"20"},

{"id": 12, "name": "246","age":"20"},

{"id": 13, "name": "张三","age":"25"},

{"id": 14, "name": "李四","age":"35"},

{"id": 15, "name": "王五","age":"20"},

{"id": 16, "name": "老王","age":"20"},

{"id": 17, "name": "张三","age":"25"},

{"id": 18, "name": "李四","age":"35"},

{"id": 19, "name": "王五","age":"20"},

{"id": 20, "name": "老王","age":"20"}];

$(document).ready(function(){

var seach=$("#seach");

seach.keyup(function(event){

//var keyEvent=event || window.event;

//var keyCode=keyEvent.keyCode;

// 数字键：48-57

// 字母键：65-90

// 删除键：8

// 后删除键：46

// 退格键：32

// enter键：13

//if((keyCode>=48&&keyCode<=57)||(keyCode>=65&&keyCode<=90)||keyCode==8||keyCode==13||keyCode==32||keyCode==46){

//获取当前文本框的值

var seachText=$("#seach").val();

if(seachText!=""){

//构造显示页面

var tab="

编号

名称

年龄

//遍历解析json

$.each(user,function(id, item){

//如果包含则为table赋值

if(item.name.indexOf(seachText)!=-1){

tab+="

"+item.id+""+item.name+""+item.age+"";

}

})

tab+="

";

$("#div").html(tab);

//重新覆盖掉，不然会追加

tab="

编号

名称

年龄

}else{

$("#div").html("");

}

// }

})

});

名字：

本文地址:http://www.it300.com/article-1782.html