欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jQuery實(shí)現(xiàn)動(dòng)態(tài)搜索顯示功能

 更新時(shí)間：2016年05月05日 14:53:04   作者：Ruthless  
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)動(dòng)態(tài)搜索顯示功能的相關(guān)資料,輸入數(shù)值自動(dòng)匹配相關(guān)信息，感興趣的小伙伴們可以參考一下

本文實(shí)例使用jQuery實(shí)現(xiàn)動(dòng)態(tài)搜索顯示功能，只要輸入值就能立刻動(dòng)態(tài)顯示數(shù)據(jù)，不同于常規(guī)查詢(xún)方法，供大家參考，具體內(nèi)容如下

模擬效果如下：

情況1：

情況2：

                 

實(shí)現(xiàn)代碼：   

<%@ 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">
 //數(shù)據(jù)源，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; 
   // 數(shù)字鍵：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){
    //獲取當(dāng)前文本框的值
    var seachText=$("#seach").val();
    if(seachText!=""){
     //構(gòu)造顯示頁(yè)面
     var tab="<table width='300' border='1' cellpadding='0' cellspacing='0'><tr align='center'><td>編號(hào)</td><td>名稱(chēng)</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);
     //重新覆蓋掉，不然會(huì)追加
     tab="<table width='300' border='1' cellpadding='0' cellspacing='0'><tr align='center'><td>編號(hào)</td><td>名稱(chēng)</td><td>年齡</td></tr>";
    }else{
     $("#div").html("");
    }
   // }
  })
 });
 </script>
 </head>
 
 <body>
  名字：<input id="seach" />
  <br/><br/>
  <div id="div"></div>
 </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論