本文實例使用jQuery實現動態搜索顯示功能，只要輸入值就能立刻動態顯示數據，不同于常規查詢方法，供大家參考，具體內容如下
模擬效果如下：
情況1：
情況2：
實現代碼：
<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>struts2</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.1.js"></script> <script type="text/javascript"> //數據源，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="<table width='300' border='1' cellpadding='0' cellspacing='0'><tr align='center'><td>編號</td><td>名稱</td><td>年齡</td></tr>"; //遍歷解析json $.each(user,function(id, item){ //如果包含則為table賦值 if(item.name.indexOf(seachText)!=-1){ tab+="<tr align='center'><td>"+item.id+"</td><td>"+item.name+"</td><td>"+item.age+"</td></tr>"; } }) tab+="</table>"; $("#div").html(tab); //重新覆蓋掉，不然會追加 tab="<table width='300' border='1' cellpadding='0' cellspacing='0'><tr align='center'><td>編號</td><td>名稱</td><td>年齡</td></tr>"; }else{ $("#div").html(""); } // } }) }); </script> </head> <body> 名字：<input id="seach" /> <br/><br/> <div id="div"></div> </body></html>以上就是本文的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
