基于框架实现动态搜索显示功能

本文实例使用框架实现动态搜索显示功能，只要输入值就能立刻动态显示数据，不同于常规查询方法，供大家参考，具体内容如下

模拟效果如下：

情况1:

情况2:

实现代码：

% @页面语言=' Java '页面编码=' UTF-8 ' %！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML head title struts 2/title meta http-equiv=' pragma '内容=' no-cache ' meta http-equiv=' cache-control '内容=' no-cache ' meta http-equiv=' expires '内容=' 0 '脚本类型=' text/JavaScript ' src=' http 3360%=request。getcontextpath()%/js/jquery-1.4 .数据源，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 ' }]；$(文档)。ready(function(){ var seach=$(' # seach ')；西克。key up(function(event){//var key event=event | | window。事件；//var键码=Keyevent。密钥代码；//数字键：48-57 //字母键：65-90 //删除键：8 //后删除键：46 //退格键：32 //进入键：13 //if(键码=48键码=57)||(键码=65键码=90)| |键码==8 | |键码==13 | |键码==32 | |键码==46){ //获取当前文本框的值var seachText=$('#seach ').val()；if(seachText！=''){ //构造显示页面var tab='表格宽度='300 '边框='1 '单元格填充='0 '单元格间距='0'tr align='center'td编号/tdtd名称/tdtd年龄/TD/tr '；//遍历解析json美元.每个（用户、功能(身份证、项目){ //如果包含则为桌子赋值if(item.name.indexOf(seachText)！=-1){ tab=' tr align=' center ' TD '项。id '/tdtd '项。名称为“/tdtd”的项目。年龄'/TD/tr '；} })tab='/table '；$('#div ').html(选项卡);//重新覆盖掉，不然会追加制表符='表格宽度='300 '边框='1 '单元格填充='0 '单元格间距='0'tr align='center'td编号/tdtd名称/tdtd年龄/TD/tr '；}else{ $('#div ').html(" ")；} //} }) });/脚本/头体名字：输入id=' seach '/br/br/div id=' div '/div/body/html以上就是本文的全部内容，希望对大家的学习有所帮助。