Dwr 搜索条

最新推荐文章于 2024-08-07 14:10:19 发布
最新推荐文章于 2024-08-07 14:10:19 发布
阅读量447 收藏
点赞数
分类专栏： js特效 文章标签： dwr function struts list javascript autocomplete
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxq1406spys/article/details/5436906
版权

首先dwr介绍回顾

步骤1.将dwr.jar包放在工程目录LIB下面

      2.在web.xml中加入dwr的<servlet>,如果整合了struts，则将dwr的配置文件放在struts配置文件下面 ,如下(红色为DWR配置文件)

    <servlet>
        <servlet-name>action</servlet-name>
        <servlet-class>org.apache.struts.action.ActionServlet</servlet-class>

        <!-- Tiles configuration -->
        <init-param>
      <param-name>definitions-config</param-name>
      <param-value>/WEB-INF/tiles-defs.xml</param-value>
    </init-param>
  
  <!-- Struts configuration -->
    <init-param>
      <param-name>config</param-name>
      <param-value>/WEB-INF/struts-config.xml,/WEB-INF/struts-config2.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>

<servlet>
   <servlet-name>dwr-invoker</servlet-name>
   <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
   <init-param>
       <param-name>debug</param-name>
       <param-value>true</param-value>
   </init-param>
 </servlet>

 <servlet-mapping>
    <servlet-name>action</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
 
   <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
 </servlet-mapping>

 

3.编写DAO类（操作类，相关的操作）

4.写dwr.xml文件，该文件必须放在跟WEB.xml同目录下面

5.写相关的JSp页面，在也面中必须引入如下几个JS文件

  <script type="text/javascript" src="dwr/util.js"></script>
  <script type="text/javascript" src="dwr/engine.js"></script>
  <script type="text/javascript" src="dwr/interface/*.js"></script>

  注意：*代表的是dwr.xml文件中的create标签中的属性javascript的值

6.在jsp页面中写上相关的js操作以及DIV

 

接下来就写一个模仿GOOGLE的搜索条，首先完成以上的1跟2两个步骤，不再说明

 

3.写相关的DAO层，跟service层，省去相关的代码

   

 

public List getxwdjlz(String xxhh) throws Exception {
  List list = new ArrayList();
  //list.add("33");
  //list.add("301");
  //list.add("304");

//如果结合spring一起写的，可以不用创建daos该对象，直接用SPRING容器自动创建，WEB启动的时候就已经创建好，直接用set方法调用就可以
  HyzkzmDAO daos=new Db2ServerHyzkzmDAO();    try{
   daos.getConncetion();
   list = daos.getxwdjlz(xxhh);
   System.out.println("列表 数值:"+list);
   daos.releaseConncetion();
  }
  catch(Exception ex){
   daos.releaseConncetion();
  }
        return list;
 }

4.dw.xml文件

  <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr//dwr30.dtd">
<dwr>
  <allow>

   <!--这个create就是创建了刚才写的操作类对应的js-->
  <create javascript="hyzkDao" creator="new">
      <param name="class" value="service.impl.HyzkzmManagerImpl"></param>

     <!--可以操作该类中的getxwdjlz方法-->
    <include method="getxwdjlz"></include>
     </create>

   <!--一下可以参考，该例子用不到以下代码，省去-->
   <!--  <create javascript="userDao" creator="new">
      <param name="class" value="com.dwr.dao.UserDao"></param>
     </create>
     <convert converter="bean" match="com.dwr.model.User">
       <param name="include" value="username,age"></param>
     </convert> -->
 <!-- 返回list
     <convert converter="bean" match="org.coffee.oa.vo.Organise" />
  </allow> 

<!--如果返回的是一个list对象，其中list装载了其他对象，请参考如下-->
  <signatures>
    <![CDATA[
     import java.util.List; 
     import org.coffee.oa.biz.OrganiseBIZ;
     import org.coffee.oa.vo.Organise;
   ]]>
</signatures>
  -->
   </allow>
</dwr>

 

5.

<script type="text/javascript" src="dwr/util.js"></script>
  <script type="text/javascript" src="dwr/engine.js"></script>
  <script type="text/javascript" src="dwr/interface/hyzkDao.js"></script>

6.test.jsp代码如下

<!-- 模拟google搜索 -->
<script type="text/javascript">
  /**//********************************可配置选项********************************/
    // 被选中的相似关键字背景颜色
    var selectedBgColor = "#CCCCCC";
    // 未被选中的相似关键字背景颜色
    var unselectedBgColor = "#FFFFFF";
    // 相似关键字列表框的边框
    var listBorder = "1 solid #000000";
    /**//***************************************************************************/
 
    /**//********************************不可配置选项********************************/
   
    // 上一次输入的关键字（用来判断关键字是否有改变，没有则不再去服务端重新获取提示关键字）
    var oldKeyValue;
    // 鼠标相对于提示关键字列表框的位置（0：提示框外面，1：提示框里面）
    var mouseLocation = 0;
    // 当前选中的提示关键字索引（从0开始，等于-1表示没有被选中项）
    var selectedKeyIndex = -1;
    // 上一次选中的提示关键字索引（从0开始，等于-1表示没有上次被选中项）
    var oldSelectedKeyIndex = -1;
    // 提示关键字总数
    var tdCount = 0;
   
    /**//***************************************************************************/
   
      /**//*
        用途：给String对象添加去除左右空格方法
    */
    String.prototype.trim = function() {
      var m = this.match(/^/s*(/S+(/s+/S+)*)/s*$/);
      return (m == null) ? "" : m[1];
    }
   
    /**//*
        用途:初始化提示关键字列表框的状态
    */
    function initKeyListState(){
        selectedKeyIndex = -1;
        oldSelectedKeyIndex = -1;
        tdCount = 0;
    }
   
    /**//*
        用途:将上一次选中的关键字项变为未选中
    */
    function disSelectedOldKey(){
          //判断说明：oldSelectedKeyIndex!=selectedKeyIndex
          //        当只有一个相似关键字的时候，则不存在上一次选中和这次选中关键字，
          //        只要第一次选中后，按向上或向下箭头都是选中。
        if (oldSelectedKeyIndex!=-1&&oldSelectedKeyIndex!=selectedKeyIndex){
              $('keyId'+ oldSelectedKeyIndex).bgColor=unselectedBgColor;
          }   
          // 上一次选中项更新
          oldSelectedKeyIndex = selectedKeyIndex;
    }
   
    /**//*
        用途:当按上下箭头时选中新的提示关键字项，按回车时将选中的提示关键字输入到搜索框。
    */
    function setSelectedKey(){
        // $('keyId0')存在表示有相关提示关键字，不存在则不处理。
        if($('keyId0')){
          if (event.keyCode==38){
            //------处理向上事件------
              if (selectedKeyIndex==-1){
                  selectedKeyIndex = tdCount-1;
              }else{
                  selectedKeyIndex= (selectedKeyIndex+tdCount-1)%tdCount;
              }
              $('keyId'+ selectedKeyIndex).bgColor= selectedBgColor;   
              disSelectedOldKey();
          }else if (event.keyCode==40){
            //------处理向下事件------
              if (selectedKeyIndex==-1){
                  selectedKeyIndex = 0;
              }else{
                  selectedKeyIndex = (selectedKeyIndex+1)%tdCount;
              }
              $('keyId'+ selectedKeyIndex).bgColor= selectedBgColor;
              disSelectedOldKey();   
          }else if (event.keyCode==13){
            //------处理回车事件------
              $('cond').value=$('keyId'+ selectedKeyIndex).innerText;
              setCursorLast($('cond'));
              // 隐藏提示关键字列表框
              $('dropdownlistDiv').style.display='none';
          }
      }
    }
   
    /**//*
        用途:获取相似关键字
    */
    function getConformKey(){
 
      //得到输入的关键字
      var keyValue = $('cond').value.trim();
  // alert(keyValue);
  // alert("老的关键字"+oldKeyValue);
      // 如果这次的查询关键字和上次的一样，则不去服务器重新获取相似关键字列表。
      if (keyValue!=oldKeyValue){
          // 关键字为空则不去服务器获取相似关键字列表
          if (keyValue==''){
              dwr.util.removeAllRows('showKeyList');
              setDropListVisible(false);
              initKeyListState();
          }else{
              //采用ajax异步模式获取相似关键字(这里的useraction,改成自己的action)
     //alert("执行");
              hyzkDao.getxwdjlz(keyValue,conformKeyCallback);  //调用了类中的方法getxwdjlz，其中keyValue为传进去的一个参数，conformKeyCallback为回调方法，下面有对应的js方法
          }
      }
    }
   
    /**//*
        用途:获取关键字回调方法
    */
    function conformKeyCallback(keyList){
 
  // alert(keyList);
 
        dwr.util.removeAllRows('showKeyList');
        initKeyListState();
        if (keyList.length>0){
      // alert(keyList.length);
            // 生成相似关键字提示框
            dwr.util.addRows('showKeyList',keyList,cellFuncs, {
                cellCreator:function(options) {
                  var td = document.createElement("td");
                  td.id = 'keyId' + tdCount++;
                  td.onmouseover = function (){selectedKeyIndex=parseInt(this.id.substring(5,td.id.length));this.bgColor=selectedBgColor;disSelectedOldKey();};
                  td.οnclick= function (){
                      $('cond').value=this.innerText;
                      $('cond').focus();
                    setCursorLast($('cond'));
                    $('dropdownlistDiv').style.display='none';
                  };
                  return td;
                },escapeHtml:false});
            setDropListVisible(true);
        }else{
            setDropListVisible(false);
        }
    }
   
    /**//*
        用途:表格数据显示处理方法
    */
    var cellFuncs = [
      function(data) { return data; }
    ];
   
    /**//*
        用途:将输入框的光标移到最后
    */
    function setCursorLast(inputObj){
        var inputRange = inputObj.createTextRange(); 
        inputRange.collapse(true);
        inputRange.moveStart('character',inputObj.value.length);
        inputRange.select();
    }
           
    /**//*
        用途:创建相似关键字列表框
    */
    function createShowDiv(){
        var showDiv = document.createElement("div");
  //alert(showDiv);
  // var showDiv = document.createElement("div");
  // alert( dwr.util.getValue("cond"));
        showDiv.id = "dropdownlistDiv";  
  
        with(showDiv.style){
   
           position = "absolute";
           //层的绝对位置从这调整 
           left = parseInt($('cond').style.left.replace('px',''))+190;
           top = parseInt($('cond').style.top.replace('px',''))+parseInt($('cond').style.height.replace('px',''))+28;
           width = parseInt($('cond').style.width.replace('px','')); 
           border = listBorder; 
           zIndex = "1";  
           display='none';
           backgroundColor = unselectedBgColor;  
        }alert(showDiv);
        showDiv.οnmοuseοver=function (){mouseLocation=1;};
        showDiv.οnmοuseοut=function (){mouseLocation=0;};
        //overflow设置滚动条
        showDiv.innerHTML = "<div style='width:100%;height:150px;overflow:auto;'><table border='0' style='width: 100%;height:20%;font-size: 12;color:#33CC00;'><tbody id='showKeyList' style='margin-left: 0;margin-right: 0;margin-bottom: 0;margin-top: 0;'></tbody></table></div>";
        document.body.appendChild(showDiv);
        initKeyListState();
    } 
   
    /**//*
        用途:设置相似关键字列表框是否可见
        参数：isDisplay，true表示可见，false表示不可见
    */
    function setDropListVisible(isDisplay){
        if (mouseLocation == 1){
            return;
        }
        if (($('cond').value.trim()!='')&&(isDisplay==true)){
            $('dropdownlistDiv').style.display='';
        }
        else{
            $('dropdownlistDiv').style.display='none';
        }
    }
   
    // 将创建相似关键字列表框方法附加到onload事件中
    if (window.addEventListener){
       window.addEventListener('load', createShowDiv, false);
    }else if (window.attachEvent){
       window.attachEvent('onload', createShowDiv);
    }
    </script>
  </head>
 
  <body>

<div style="position:absolute;left:190px;top:25px;">
    <input AUTOCOMPLETE="off" οnkeydοwn="oldKeyValue=this.value.trim();setSelectedKey();"  οnkeyup="getConformKey();"  οnfοcus="if(this.value=='找人') this.value='';setDropListVisible(true);" οnblur="setDropListVisible(false);" style="width: 300; height: 23;z-index: 10;top:0;left:0;"  type="text" name="cond" value="找人" id="cond" />
    <input type="button" class="btn" value="搜一下"  οnclick="findBylike();" />
</div>
  </body>
</html>

zxq1406spys
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DWR实现模拟Google搜索效果实现原理及代码
09-05
本文主要介绍DWR实现模拟Google搜索效果实现原理，感兴趣的朋友可以了解下，或许对你的DWR学习有帮助，闲话就不多说了，看代码了
模拟google搜索
fengfan2006的专栏
01-17 143
/**//********************************可配置选项********************************/ // 被选中的相似关键字背景颜色 var selectedBgColor = "#CCCCCC"; // 未被选中的相似关键字背景颜色 var unselectedBgColor = "#FF...
使用DWR实现搜索自动提示(二)
sprite
06-28 120
js 代码 TextSuggest = Class.create();       TextSuggest.prototype = {        //构造函数       initialize: function(elementId /*:HTMLInputElementId*/,oProvider /*:SuggestionPro...
DWR.rar_dwr
09-24
Direct Web Remoting (DWR) 是一个开源Java库，它允许Web应用程序在客户端浏览器和服务器端之间进行实时的、安全的、动态的通信。DWR简化了Ajax（Asynchronous JavaScript and XML）应用的开发，使得JavaScript可以...
dwr.rar_dwr
09-22
DWR（Direct Web Remoting）是一个开源Java库，它允许Web应用程序在客户端JavaScript和服务器端Java之间进行直接的远程调用。这个“dwr.rar_dwr”文件很可能包含了一个DWR的实例，以及一个用于演示AJAX...
DWR中Java方法的参数及返回值
我行我能
03-01 1518
DWR使用篇 1、调用没有返回值和参数的Java方法 1.1、dwr.xml的配置Xml代码 dwr>     allow>       create creator="new" javascript="testClass" >         param name="class" value="com.dwr.TestClass" />      
邮箱跟电话正则验证
我行我能
09-04 844
function check(){  if(document.forms[0].topic.value==""){      alert(请输入信件标题);   return false;  }  if(document.forms[0].body.value==""){      alert(请输入反馈内容);   return false;  }  if(document.forms[
js刷新页面---新增栏目
我行我能
09-04 763
 先来看一个简单的例子：下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。 frame.html 由上(top.html)下(bottom.html)两个页面组成，代码如下： frame 现在假设top.html (即上面的页面) 有七个button来实现对bottom.html (即下面的页面) 的刷新，可以用以下七种语句，哪个好用自己
横幅
我行我能
09-04 731
function closediv(id){obj=document.getElementById(id);obj.style.display="none";}style="BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; Z-INDEX: 1; BACKGROUND: #fff; LEFT: 6px; VISIBILITY: vi
js 获取select元素的值
我行我能
10-27 576
<br />js获取select元素的value值和文本的方法<br /> <br /> <br />获得选中的对象<br />var selectobj = document.getElementById("selectId");<br /> <br />获得索引;<br /> <br />var　index = selectobj.selectedIndex;<br /> <br />获得选中的value的值<br /> <br />var value = selectobj.options[index
文本框只读与写设置，下拉框制定
我行我能
12-23 549
window.onload=function(){var select1_obj=document.getElementById("select1");select1_obj.onchange=function(){   if(this.value=="aaa"){      //alert("aaa");        document.getElementById("t2").setAttri
正则表达式限制文本框只能输入数字
我行我能
06-24 530
<br /> 1.文本框只能输入数字代码(小数点也不能输入)<br />    <input onkeyup="this.value=this.value.replace(//D/g,'')" onafterpaste="this.value=this.value.replace(//D/g,'')"><br />    2.只能输入数字,能输小数点.<br />    <input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if
头部出现一下再隐藏
我行我能
09-04 504
          http://dialog.cnnb.com.cn/live/duihua080822.htm" target="_blank">           setTimeout("document.getElementById(bigFlash).style.display=none", 8000);
dwr 三级联动
我行我能
03-31 445
san.jsp                      //根据国家id查询所属省或州    function queryjiedao()    {  //alert("开始拉");        var quId = $("qu").value;        //默认为不选择        if(quId == 0)        {            ${"jiedao"}
js验证
我行我能
10-26 410
//判断输入内容是否为空    function IsNull(){        var str = document.getElementById(str).value.trim();        if(str.length==0){            alert(对不起，文本框不能为空或者为空格!);//请将“文本框”改成你需要验证的属性名称!     
【C++ STL】list
Z1tai的博客
08-04 911
list是 C++ STL 中的双向链表容器，它能够高效地支持元素的插入和删除操作，即使在容器中间。每个节点存储数据以及指向前一个和后一个节点的指针，这种特性使得 list 在需要频繁插入和删除元素时表现优秀。与 vector 不同，list 的内存空间不是连续的，因此随机访问效率较低（时间复杂度为 O(n)），但它提供了双向遍历的能力。list 还支持逆向迭代器，允许从尾部向头部遍历列表。
C++ STL专题 list的讲解
最新发布
Mike的博客
08-07 517
1.list是可以在常数范围内任意位置进行插入和删除的序列式容器，并且可以前后双向迭代。2. list的底层是双链表结构，双向链表中每个元素存储在互不相关的独立节点中，在节点中通过指针指向其前一个元素和后一个元素。3. list与forward_list非常相似：最主要的不同在于forward_list是单链表，只能朝前迭代。4. 与其他的序列式容器相比(vector，deque), list通常在任意位置进行插入，移除元素的执行效率更好。5. 与其他序列式容器相比，
【C++修炼之路 第七章】模拟实现 list 类模板
唯有忍受别人不能忍受的，才能享受别人不能享受的
08-04 1153
【模拟实现STL库中 list 】【迭代器设计思想】实现：节点类，链表类，迭代器类 实现常见函数：insert/erase、push_back/pop_back、拷贝构造、赋值重载...
DWR配置与实战指南
"dwr配置使用教程 - DWR2.0 中文文档，由方佳玮编著，包含DWR入门、配置、使用等详细内容，旨在帮助开发者掌握DWR的基本知识、用户界面组件和远程方法调用，适用于有一定JSP、JavaScript和应用服务器基础的程序员。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值