页面仿百度下拉框,支持动态后台提取数据

<style type="text/css">
.bottom_up {
 font-family: "宋体", Arial, sans-serif, "宋体", "黑体";
 font-size: 12px;
 height: 22px;
 border: 1px solid #738C4A;
 background-color: #DEE6CC;
 margin-right: 5px;
 color: #738C4A;
 padding-right: 4px;
 padding-left: 4px;
}
.input_1_4 {
 height: 20px;
 width: 320px;
 border: 1px solid #738C4A;
 font-family: "宋体", Arial, sans-serif, "宋体", "黑体";
 background-color: #f6f9f1;
 color:#738C4A;
 font-size: 12px;
 margin-right: 5px;
 margin-left: 5px;
 line-height: 20px;
}
</style>
<script type="text/javascript" src="#springUrl('')/js/core/page/table.js"></script>
<script type="text/javascript" src="#springUrl('')/js/dojo/dojo/dojo.js"></script>
<script type="text/javascript" src="#springUrl('')/js/core/widget/widgets.js"></script>
<script type="text/javascript" src="#springUrl('')/js/core/common.js"></script>
<script type="text/javascript" src="#springUrl('')/web/js/neaten/time.js"></script>
<script> 

 function getAbsolutePos(p) {
  var left = (navigator.appVersion.indexOf("MSIE")!=-1)?document.getElementById("box").offsetLeft:p.offsetLeft;
  var top = (navigator.appVersion.indexOf("MSIE")!=-1)?document.getElementById("tt").offsetTop:p.offsetTop;
  var r = {"x":left, "y":top};
  if(r.offsetParent) {
   var temp = getAbsolutePos(r.offsetParent);
   r.x += temp.x;
   r.y += temp.y;
  }
  return r;
 }

 function getNextPos(p,t) {
  var a = document.getElementById(p);
  var r = getAbsolutePos(a);
  if(navigator.appVersion.indexOf("MSIE")!=-1) {
   document.getElementById(t).style.top = r.y + a.offsetHeight + 29;
   document.getElementById(t).style.left = r.x + a.offsetLeft + 10 + 95;
  }else {
   document.getElementById(t).style.top = a.offsetHeight + 238 + "px";
   document.getElementById(t).style.left = r.x + 243 + 95 + "px";
  }
  if(t == "showOrg") hidden("showTopic");
  else hidden("showOrg");
 }

 function getNextPos1(p,t) {
  var a = document.getElementById(p);
  var r = getAbsolutePos(a);
  if(navigator.appVersion.indexOf("MSIE")!=-1) {
   document.getElementById(t).style.top = r.y + a.offsetHeight + 29;
   document.getElementById(t).style.left = r.x + a.offsetLeft + 10 + 95 + 455;
  }else {
   document.getElementById(t).style.top = a.offsetHeight + 238 + "px";
   document.getElementById(t).style.left = r.x + 243 + 95 + 444 + "px";
  }
  if(t == "showOrg") hidden("showTopic");
  else hidden("showOrg");
 }

 var _index = -1;
 
 function move(id, index){ 
  if(isVisible(id)) {
   var div = document.getElementById(id);
   if(div.childNodes && div.childNodes.length > 0){
    var arr = div.childNodes[0].childNodes;
    var cur = parseInt(_index);
    
    if(index == -1){
     cur -= 1;
    }else{
     cur += 1;
    }
    
    if(cur < 0 || cur == arr.length ){
     return;
    }
    setHightlighter(id,cur);
    setValue(id,cur);
   }
  }
 }

 function setHightlighter(id, index){
  var div = document.getElementById(id);
  if(div.childNodes && div.childNodes.length > 0){
   var arr = div.childNodes[0].childNodes;
   for(var i = 0; i < arr.length; i++){
    if(i == index){
     arr[i].style.background="#738C4A";  
    }else{
     arr[i].style.background="white";
    }
   }
  }
  _index = index;
 }

 function setValue(id, index) {
  var div = document.getElementById(id);
  if(div.childNodes && div.childNodes.length > 0){
   var arr = div.childNodes[0].childNodes;
   for(var i = 0; i < arr.length; i++){
    if(i == index){
     if(id == "showOrg") document.getElementById("word").value = arr[i].innerHTML; 
     else document.getElementById("zhutiText").value = arr[i].innerHTML; 
    }
   }
  }
  _index = index;
 }

 

 function suggest(id, zhuti,ev) {
  var intKey = -1;
  var event = window.event || ev;
  intKey = event.keyCode;
  
  if (intKey == 38) { //向上移
   move(id, -1);
  } else if (intKey == 40) { //向下移
   move(id, 1);
  }else if (intKey == 13) { //Enter 键
   if(zhuti) document.getElementById("zhutiText").focus();
   else {
    hidden(id);
   }
  }
  return true;
 }
  
 
 function tijiao() {
  var orgName = document.getElementById("word").value;
  var topicName = document.getElementById("zhutiText").value;
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  window.location.href = "#springUrl('')/page/dataupdate/updateInfoCtrl.do?action=query4query&orgName="+orgName+"&topicName="+topicName+"&start="+start+"&end="+end;
 }

 function reset() {
  document.getElementById("word").value = "";
  document.getElementById("zhutiText").value = "";
  document.getElementById("start").value = "";
  document.getElementById("end").value = "";
 }

 function hidden(id) {
  document.getElementById(id).style.display = "none";
 }

 function show(id) {
  document.getElementById(id).style.display = "";
 }

 function isVisible(id) {
  if(document.getElementById(id).style.display == "none") return false;
  else return true;
 }

 function changeValue(b) {
  var value = b.innerHTML;
  document.getElementById("word").value = value;
  hidden("showOrg");
 }

 function changeValueTopic(a) {
  var value = a.innerHTML;
  document.getElementById("zhutiText").value = value;
  hidden("showTopic");
 }


 function changeSelect(ev) {
   getNextPos1("zhutiText","showTopic");
   var event = window.event || ev;
   var zhutiText = dojo.byId("zhutiText").value; 
   var word = dojo.byId("word").value;
   if(event.keyCode!="38" && event.keyCode!="40" && event.keyCode!=13){  
    var content = {action:"query4TopicList", word:encodeURI(word), zhutiText:encodeURI(zhutiText)};
    dojo.io.bind({
     url : "#springUrl('')/page/dataupdate/updateInfoCtrl.do",
     content : content,
     preventCache : true,
     method : "POST",
     encoding : "utf",
     load : function(type, data, e){ 
      var textBuffer = [];
      if(data[0].name=="") {
       hidden("showTopic")
      } else {
       show("showTopic");
       for(var i=0; i<data.length; i++) {
        textBuffer.push("<li style=/"cursor:pointer;padding:6px;list-style: none;/" align=/"left;/" οnmοuseοver=/"this.style.background=/'#738C4A/'/" οnmοuseοut=/"this.style.background=/'white/'/" οnclick=/"changeValueTopic(this)/">"+data[i].name+"<//li>");
       }
       dojo.byId("showTopic").innerHTML = "<ul>"+textBuffer.join("")+"<//ul>";
       _index = -1;
      }      
     },
     error : function(type, data, e){},
     mimetype : "text/json",
     sync : false 
    }); 
   }else {
    suggest("showTopic", null, ev);
   }   
  }

 function refresh(ev){
  getNextPos("word","showOrg");
  document.getElementById("zhutiText").value = "";
  var event = window.event || ev;
  if(event.keyCode!="38" && event.keyCode!="40" && event.keyCode!="13"){
   var word = dojo.byId("word").value;
   if(word!="") {
    show("showOrg");
   }
   var content = {action:"query4OrgList", word:encodeURI(word)};
   dojo.io.bind({
    url : "#springUrl('')/page/dataupdate/updateInfoCtrl.do",
    content : content,
    preventCache : true,
    method : "POST",
    encoding : "utf",
    load : function(type, data, e){       
     var textBuffer = [];
     if(data[0].name=="") {
      hidden("showOrg");
     }else {
      for(var i=0; i<data.length; i++) {
       textBuffer.push("<li align=/"left;/" style=/"cursor:pointer;padding:6px;list-style: none;/" οnclick=/"changeValue(this)/" οnmοuseοver=/"this.style.background=/'#738C4A/'/" οnmοuseοut=/"this.style.background=/'white/'/">"+data[i].name+"<//li>");
      }
      dojo.byId("showOrg").innerHTML = "<ul>"+textBuffer.join("")+"<//ul>";
      _index = -1;
     }
    },
    error : function(type, data, e){},
    mimetype : "text/json",
    sync : false 
   });     
  }else {
   suggest("showOrg","zhutiText",ev);
  }
 }
</script>
<div align="center">
 <table class="table_1" width="98%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr><th colspan="5">查询条件</th></tr>
 <tr>
 <td width="10%"><div align="right">单位名称</div></td>
 <td><div align="left">
  <input class="input_1_4" type="text" id="word" size="50" οnkeyup="refresh(event)" οnfοcus="hidden('showTopic')" value="$!{orgName}"/>
 </div></td>
 <td><div align="right">主题名称</div></td>
 <td><div align="left">
  <input class="input_1_4" type="text" id="zhutiText" size="50" value="$!{topicName}" οnkeyup="changeSelect(event)" οnfοcus="hidden('showOrg')"/>
 </div></td>
 </tr>
 <tr>
 <td><div align="right">开始时间</div></td>
 <td><div align="left"><input class="input_1_4" type="text" value="$!{start}" maxlength="100" id="start" οnclick="SelectDate(this,'yyyy-MM-dd hh:mm:ss',0,0)" readonly="true" style="width: 295px;cursor:pointer"/><img src="#springUrl('')/web/images/neaten/date.gif" width="20" height="20" οnclick="SelectDate(document.getElementById('start'),'yyyy-MM-dd hh:mm:ss',0,0)"> 
 </div></td>
 <td><div align="right">结束时间</div></td>
 <td><div align="left"><input class="input_1_4" type="text" value="$!{end}" maxlength="100" id="end" οnclick="SelectDate(this,'yyyy-MM-dd hh:mm:ss',0,0)" readonly="true" style="width: 301px;cursor:pointer" /><img src="#springUrl('')/web/images/neaten/date.gif" width="20" height="20" οnclick="SelectDate(document.getElementById('end'),'yyyy-MM-dd hh:mm:ss',0,0)">  
 </div></td>
 </tr>
 <tr><td colspan="5">
 <div align="center"> 
 <input type="button" value="查询" class="bottom_up" οnclick="tijiao()"/> 
 <input type="button" value="重置" class="bottom_up" οnclick="reset()"/>
 </div>
</td></tr></table>
</div>

<div id="showOrg" style="position: absolute; top: 236px; left: 466.5px; width: 321px; z-index: 2000; display: none; background: white; border: 1px solid #738C4A; border-top: 0"></div>
 <div id="showTopic" style="position: absolute; top: 236px; left: 801px; width: 321px; z-index: 2000; display: none; background: white; border: 1px solid #738C4A; border-top: 0"></div>

 

 

 

 

控制器:

 

 public ModelAndView query4OrgList(HttpServletRequest request,
   HttpServletResponse response, UpdateInfoCmd cmd) throws Exception {
  request.setCharacterEncoding("utf-8");
  response.setContentType("text/json; charset=gbk");
  List list = new ArrayList();
  String word = null;
  try {
   word = ServletRequestUtils.getStringParameter(request, "word", "");
   word = URLDecoder.decode(word, "UTF-8").trim();
   list = topicInfoSve.getOrgName(word);
   String data = "[";
   String dataStr = "";
   if(list!=null && list.size()!=0) {
    for(int i=0; i<list.size(); i++) {
     System.out.println(list.get(i));
     data = data+"{name:'"+list.get(i)+"'},";
     dataStr = data.substring(0, data.length()-1);
    }
   } else {
    dataStr = data+"{name:''}";
   }
   dataStr = dataStr+"]";
   response.getWriter().write(dataStr);
  } catch (IOException e) {
   e.printStackTrace();
  }
  return null;
 }
 
 public ModelAndView query4TopicList(HttpServletRequest request,
   HttpServletResponse response, UpdateInfoCmd cmd) throws Exception {
  request.setCharacterEncoding("utf-8");
  response.setContentType("text/json; charset=gbk");
  List list = new ArrayList();
  String word = "";
  String topicword = "";
  try {
   word = ServletRequestUtils.getStringParameter(request, "word", "");
   topicword = ServletRequestUtils.getStringParameter(request, "zhutiText", "");
   word = URLDecoder.decode(word, "UTF-8").trim();
   topicword = URLDecoder.decode(topicword, "UTF-8").trim();
   list = topicInfoSve.getTopicName(word, topicword);
   String data = "[";
   String dataStr = "";
   if(list!=null && list.size()!=0) {
    for(int i=0; i<list.size(); i++) {
     TopicInfo topicInfo = (TopicInfo) list.get(i);
     data = data+"{name:'"+topicInfo.getTopicName()+"'},";
     dataStr = data.substring(0, data.length()-1);
    }
   } else {
    dataStr = data+"{name:''}";
   }
   dataStr = dataStr+"]";
   response.getWriter().write(dataStr);
  } catch (IOException e) {
   e.printStackTrace();
  }
  return null;
 }
 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值