DWR实现搜索自动提示

 实现了一个类似google suggest的功能，拿来和大家分享一下。主要使用javascipt + Dwr + spring +hibernate

使用Dwr当然是免不了要配置，先来看一下Dwr是如何把我们的service层（spring bean中的）方法 暴露给前端js的，它使得前端使用service就像使用javascript自定义的函数一样方便。

xml 代码

xml 代码

<dwr>
    <allow>
        <!-- DistrictLocatin -->
        <create creator="spring" javascript="DistrictLocationService">
            <param name="beanName" value="districtLocationService" />
            <!--<param name="location" value="./spring-action.xml" />-->
            <include method="findAllByLocationRangeFor51ditu" />
            <include method="findAllByKeywords" />
        create>
<convert converter="bean" match="com.goojia.dal.model.DistrictLocation">
            <param name="include" value="id,districtName,avgPrice,address,houseCount,lng51,lat51">param>
        convert>
allow>
dwr>

 

java 代码

service 层查找方法


/**
     * 根据输入的关键字查询小区信息,最大返回MAX_DISTRICT条记录
     * @param keywords
     * @return
     */
    public List  findAllByKeywords(String keywords){
 }

 前面使用非常简单。只需要把生成的javascript导入 把componet组件放到你想放文本输入框的地方，并设置一下你想使用的样式，如果不传，将使用默认的样式  

<script src="<ww:url value="/dwr/interface/DistrictLocationService.js" includeParams="none" />" type="text/javascript"></script>
<script src="<ww:url value="/dwr/engine.js" includeParams="none" />" type="text/javascript"></script>
<script src="<ww:property value=" type="text/javascript" picurl></script>         
<script src="<ww:property value=" type="text/javascript" picurl></script>

html 代码

<ww:component  id="district" name="districtName" template="autocomplete">
      <ww:param name="size">40ww:param>
      <ww:param name="maxlength">30ww:param>
      <ww:param name="dwrMethod">DistrictLocationService.findAllByKeywordsww:param>
      <ww:param name="hiddenId">'districtId'ww:param>
    ww:component>

js 代码

TextSuggest = Class.create();

TextSuggest.prototype = {
    //构造函数
   initialize: function(elementId /*:HTMLInputElementId*/,oProvider /*:SuggestionProvider*/, options/*:cssStyle and display count  ect*/) {
      this.id          = elementId;
      this.provider    = oProvider;
      var browser      = navigator.userAgent.toLowerCase();
      this.isIE        = browser.indexOf("msie") != -1;
      this.isOpera     = browser.indexOf("opera")!= -1;
      this.isMozilla   = (browser.indexOf("gecko")!= -1 && browser.indexOf("mozilla")!= -1);
      this.textInput   = $(this.id);
      this.suggestions = new Array();
      this.setOptions(options);
      this.injectSuggestBehavior();
   },
    //设置参数
   setOptions: function(options) {
      this.options = {
         //层样式
         suggestDivClassName: 'suggestDiv',
         //选项样式
         suggestionClassName: 'suggestion',
         //匹配样式
         matchClassName     : 'match',
         //是否匹配输入框宽度
         matchTextWidth     : true,
         //选项颜色
         selectionColor     : '#b1c09c',
          //是否从头匹配
         matchAnywhere      : false,
         //是否忽略大小写
         ignoreCase         : false,
         //显示数目
         count              : 10,
          //隐藏字段的Id
         hiddenId           : ''
      }.extend(options || {});
   },
    //注入输入提示行为
   injectSuggestBehavior: function() {

      if ( this.isIE ||this.isMozilla){
          this.textInput.setAttribute('autocomplete','off');
      }

    //创建控制器
      var keyEventHandler = new TextSuggestKeyHandler(this);
      //主要是为了避免在按回车的时候把表单提交 目前未能实现
      //new Insertion.After( this.textInput,'' );
     // new Insertion.After( this.textInput,'' );
      //创建div层
      this.createSuggestionsDiv();
   },
    //处理输入信息
   handleTextInput: function() {
     var previousRequest  = this.lastRequestString;
     this.lastRequestString =this.textInput.value.replace(/(^/s*)|(/s*$)/g, "");
     if ( this.lastRequestString == "" ||this.lastRequestString.length <=0 ){
          //如果有hidden的变量，要将变量置为空
         if(this.options.hiddenId != "" && this.options.hiddenId.length >0){
            $(this.options.hiddenId).value = "";
           }
         this.hideSuggestions();
     }else if ( this.lastRequestString != previousRequest ){
          //访问数据源
        this.sendRequestForSuggestions();
     }
   },
    //选择框上移
   moveSelectionUp: function() {
      if ( this.selectedIndex > 0 ) {
         this.updateSelection(this.selectedIndex - 1);
      }
   },
    //选择框下移
   moveSelectionDown: function() {
      if ( this.selectedIndex < (this.suggestions.length - 1)  ) {
         this.updateSelection(this.selectedIndex + 1);
      }
   },
    //更新当前选择信息
   updateSelection: function(n) {
      var span = $( this.id + "_" + this.selectedIndex );
      if ( span ){
          //消除以前的样式
         span.style.backgroundColor = "";
      }
      this.selectedIndex = n;
      var span = $( this.id + "_" + this.selectedIndex );
      if ( span ){
          //更新新样式
         span.style.backgroundColor = this.options.selectionColor;
      }
   },
    //发送请求
   sendRequestForSuggestions: function() {
     if ( this.handlingRequest ) {
        this.pendingRequest = true;
        return;
     }

     this.handlingRequest = true;
     this.callDWRAjaxEngine();
   },

    //使用DWR访问后台
   callDWRAjaxEngine: function() {
           //清空以前的记录
           if(this.suggestions.length>0){
             this.suggestions = null;
           }
           //保存当前对象指针
           var tempThis = this;
           this.provider(this.lastRequestString,function(ajaxResponse){
            tempThis.suggestions = ajaxResponse;
              if ( tempThis.suggestions.length == 0 ) {
                  //如果有hidden的变量，要将变量置为空
                 if(tempThis.options.hiddenId != "" && tempThis.options.hiddenId.length >0){
                     $(tempThis.options.hiddenId).value = "";
                 }
                 tempThis.hideSuggestions();

              }else {
                 tempThis.updateSuggestionsDiv();
                 tempThis.showSuggestions();
                 tempThis.updateSelection(0);
              }
              tempThis.handlingRequest = false;
            if ( tempThis.pendingRequest ) {
                 tempThis.pendingRequest    = false;
                 tempThis.lastRequestString = this.textInput.value;
                 tempThis.sendRequestForSuggestions();
              }
           });
   },
   //显示信息
   setInputFromSelection: function() {
     var suggestion  = this.suggestions[ this.selectedIndex ];
     if(typeof(suggestion) != 'undefined'){
           //如果有hidden的变量，要将变量置赋值
          if(this.options.hiddenId != "" && this.options.hiddenId.length >0){
            $(this.options.hiddenId).value = suggestion.id;
           }
          this.textInput.value = suggestion.districtName;

       }
     this.hideSuggestions();
   },

   //
   getLeft : function () /*:int*/ {

     var oNode = this.textInput;
     var iLeft = 0;
     while(oNode.tagName != "BODY") {
       iLeft += oNode.offsetLeft;
       oNode = oNode.offsetParent;
    }

    return iLeft;
  },
   getTop : function () /*:int*/ {

     var oNode = this.textInput;
     var iTop = 0;

     while(oNode.tagName != "BODY") {
        iTop += oNode.offsetTop;
        oNode = oNode.offsetParent;
     }

     return iTop;
   },
    //显示层
   showSuggestions: function() {
      var divStyle = this.suggestionsDiv.style;
      if( divStyle.display != ''){
         this.positionSuggestionsDiv();
         divStyle.display = '';
      }
      if(isIE){
         //创建与弹出div相同样式的iframe,来修复IE6及以下版本中div不能遮住select控件的bug
         if(!this.iframeSuggestions){
            this.iframeSuggestions = document.createElement("iframe");
            var iframeStyle = this.iframeSuggestions.style;
            iframeStyle.position ='absolute';
            iframeStyle.zIndex = 100;
            iframeStyle.top = divStyle.top;
            iframeStyle.left = divStyle.left;
            iframeStyle.width = divStyle.width;
            iframeStyle.height = this.suggestionsDiv.offsetHeight;
            iframeStyle.display = '';
            this.textInput.parentNode.appendChild(this.iframeSuggestions);
         }
         var iframeStyle = this.iframeSuggestions.style;
         iframeStyle.position ='absolute';
         iframeStyle.zIndex = 100;
         iframeStyle.top = divStyle.top;
         iframeStyle.left = divStyle.left;
         iframeStyle.width = divStyle.width;
         iframeStyle.height = this.suggestionsDiv.offsetHeight;
         iframeStyle.display = '';
      }

   },
    //定位层
   positionSuggestionsDiv: function() {
      var top = (this.getTop()+this.textInput.offsetHeight) ;
      var left = this.getLeft() ;
      var width = this.textInput.offsetWidth ;

      var divStyle  = this.suggestionsDiv.style;
      divStyle.top  = top  + "px";
      divStyle.left = left + "px";

      if ( this.options.matchTextWidth ){
        divStyle.width = width+ "px";
      }

   },
    //隐藏层
   hideSuggestions: function() {
      this.suggestionsDiv.style.display = 'none';
      if(isIE){
        if(this.iframeSuggestions)
           this.iframeSuggestions.style.display = 'none';
      }
   },
    //创建层
   createSuggestionsDiv: function() {

      this.suggestionsDiv = document.createElement("div");
      this.suggestionsDiv.className = this.options.suggestDivClassName;

      var divStyle = this.suggestionsDiv.style;
      divStyle.position = 'absolute';
      divStyle.zIndex   = 101;
      divStyle.display  = "none";
      this.textInput.parentNode.appendChild(this.suggestionsDiv);
   },
    //更新层
   updateSuggestionsDiv: function() {
      this.suggestionsDiv.innerHTML = "";
      //如果有hidden变量，清空隐藏字段的值
     if(this.options.hiddenId != "" && this.options.hiddenId.length >0){
        $(this.options.hiddenId).value ="";
     }
      var suggestLines = this.createSuggestionSpans();
      for ( var i = 0 ; i < suggestLines.length ; i++ ){
        this.suggestionsDiv.appendChild(suggestLines[i]);
      }
   },
    //创建层中的选项span
   createSuggestionSpans: function() {
      var regExpFlags = "";
      if ( this.options.ignoreCase )
         regExpFlags = 'i';
      var startRegExp = "^";
      if ( this.options.matchAnywhere )
         startRegExp = '';
         //正则表达式匹配
      var regExp  = new RegExp( startRegExp + this.lastRequestString, regExpFlags );
      var suggestionSpans = new Array();
      for ( var i = 0 ; i < this.suggestions.length && i<this.options.count ; i++ )
         suggestionSpans.push( this.createSuggestionSpan( i, regExp ) )

      return suggestionSpans;
   },
    //创建单个选项span
   createSuggestionSpan: function( n, regExp ) {
      var suggestion = this.suggestions[n];

      var suggestionSpan = document.createElement("span");
      suggestionSpan.className = this.options.suggestionClassName;
      suggestionSpan.style.width   = '100%';
      suggestionSpan.style.display = 'block';
      suggestionSpan.id            = this.id + "_" + n;
      suggestionSpan.onmouseover   = this.mouseoverHandler.bindAsEventListener(this);
      suggestionSpan.onclick       = this.itemClickHandler.bindAsEventListener(this);
      var textValues = this.splitTextValues( suggestion.districtName+"",
                                             this.lastRequestString.length,
                                             regExp );
      var textMatchSpan = document.createElement("span");
      textMatchSpan.id            = this.id + "_match_" + n;
      textMatchSpan.className     = this.options.matchClassName;
      textMatchSpan.onmouseover   = this.mouseoverHandler.bindAsEventListener(this);
      textMatchSpan.onclick       = this.itemClickHandler.bindAsEventListener(this);

      textMatchSpan.appendChild( document.createTextNode(textValues.mid) );

      suggestionSpan.appendChild( document.createTextNode( textValues.start ) );
      suggestionSpan.appendChild( textMatchSpan );
      suggestionSpan.appendChild( document.createTextNode( textValues.end ) );

      //把小区地址显示在小区名后面
      //suggestionSpan.appendChild(document.createTextNode("        "+suggestion.address ) );
      suggestionSpan.innerHTML+="    "+suggestion.address;
      return suggestionSpan;
   },
    //鼠标经过处理
   mouseoverHandler: function(e) {
      var src = e.srcElement ? e.srcElement : e.target;
      var index = parseInt(src.id.substring(src.id.lastIndexOf('_')+1));
      this.updateSelection(index);
   },
    //鼠标点击处理
   itemClickHandler: function(e) {
      this.mouseoverHandler(e);
      //鼠标点击把数据set入输入框！
      this.setInputFromSelection();
      this.hideSuggestions();
   },
    //分拆字符串
   splitTextValues: function( text, len, regExp ) {
      var startPos  = text.search(regExp);
      var matchText = text.substring( startPos, startPos + len );
      var startText = startPos == 0 ? "" : text.substring(0, startPos);
      var endText   = text.substring( startPos + len );
      return { start: startText, mid: matchText, end: endText };
   },

   //如果只需要显示列表里的文字而已 可以调用此方法
   getElementContent: function(element) {
      return element.firstChild.data;
   }
};

js 代码

TextSuggest = Class.create();

TextSuggest.prototype = {
    //构造函数
   initialize: function(elementId /*:HTMLInputElementId*/,oProvider /*:SuggestionProvider*/, options/*:cssStyle and display count  ect*/) {
      this.id          = elementId;
      this.provider    = oProvider;
      var browser      = navigator.userAgent.toLowerCase();
      this.isIE        = browser.indexOf("msie") != -1;
      this.isOpera     = browser.indexOf("opera")!= -1;
      this.isMozilla   = (browser.indexOf("gecko")!= -1 && browser.indexOf("mozilla")!= -1);
      this.textInput   = $(this.id);
      this.suggestions = new Array();
      this.setOptions(options);
      this.injectSuggestBehavior();
   },
    //设置参数
   setOptions: function(options) {
      this.options = {
         //层样式
         suggestDivClassName: 'suggestDiv',
         //选项样式
         suggestionClassName: 'suggestion',
         //匹配样式
         matchClassName     : 'match',
         //是否匹配输入框宽度
         matchTextWidth     : true,
         //选项颜色
         selectionColor     : '#b1c09c',
          //是否从头匹配
         matchAnywhere      : false,
         //是否忽略大小写
         ignoreCase         : false,
         //显示数目
         count              : 10,
          //隐藏字段的Id
         hiddenId           : ''
      }.extend(options || {});
   },
    //注入输入提示行为
   injectSuggestBehavior: function() {

      if ( this.isIE ||this.isMozilla){
          this.textInput.setAttribute('autocomplete','off');
      }

    //创建控制器
      var keyEventHandler = new TextSuggestKeyHandler(this);
      //主要是为了避免在按回车的时候把表单提交 目前未能实现
      //new Insertion.After( this.textInput,'' );
     // new Insertion.After( this.textInput,'' );
      //创建div层
      this.createSuggestionsDiv();
   },
    //处理输入信息
   handleTextInput: function() {
     var previousRequest  = this.lastRequestString;
     this.lastRequestString =this.textInput.value.replace(/(^/s*)|(/s*$)/g, "");
     if ( this.lastRequestString == "" ||this.lastRequestString.length <=0 ){
          //如果有hidden的变量，要将变量置为空
         if(this.options.hiddenId != "" && this.options.hiddenId.length >0){
            $(this.options.hiddenId).value = "";
           }
         this.hideSuggestions();
     }else if ( this.lastRequestString != previousRequest ){
          //访问数据源
        this.sendRequestForSuggestions();
     }
   },
    //选择框上移
   moveSelectionUp: function() {
      if ( this.selectedIndex > 0 ) {
         this.updateSelection(this.selectedIndex - 1);
      }
   },
    //选择框下移
   moveSelectionDown: function() {
      if ( this.selectedIndex < (this.suggestions.length - 1)  ) {
         this.updateSelection(this.selectedIndex + 1);
      }
   },
    //更新当前选择信息
   updateSelection: function(n) {
      var span = $( this.id + "_" + this.selectedIndex );
      if ( span ){
          //消除以前的样式
         span.style.backgroundColor = "";
      }
      this.selectedIndex = n;
      var span = $( this.id + "_" + this.selectedIndex );
      if ( span ){
          //更新新样式
         span.style.backgroundColor = this.options.selectionColor;
      }
   },
    //发送请求
   sendRequestForSuggestions: function() {
     if ( this.handlingRequest ) {
        this.pendingRequest = true;
        return;
     }

     this.handlingRequest = true;
     this.callDWRAjaxEngine();
   },

    //使用DWR访问后台
   callDWRAjaxEngine: function() {
           //清空以前的记录
           if(this.suggestions.length>0){
             this.suggestions = null;
           }
           //保存当前对象指针
           var tempThis = this;
           this.provider(this.lastRequestString,function(ajaxResponse){
            tempThis.suggestions = ajaxResponse;
              if ( tempThis.suggestions.length == 0 ) {
                  //如果有hidden的变量，要将变量置为空
                 if(tempThis.options.hiddenId != "" && tempThis.options.hiddenId.length >0){
                     $(tempThis.options.hiddenId).value = "";
                 }
                 tempThis.hideSuggestions();

              }else {
                 tempThis.updateSuggestionsDiv();
                 tempThis.showSuggestions();
                 tempThis.updateSelection(0);
              }
              tempThis.handlingRequest = false;
            if ( tempThis.pendingRequest ) {
                 tempThis.pendingRequest    = false;
                 tempThis.lastRequestString = this.textInput.value;
                 tempThis.sendRequestForSuggestions();
              }
           });
   },
   //显示信息
   setInputFromSelection: function() {
     var suggestion  = this.suggestions[ this.selectedIndex ];
     if(typeof(suggestion) != 'undefined'){
           //如果有hidden的变量，要将变量置赋值
          if(this.options.hiddenId != "" && this.options.hiddenId.length >0){
            $(this.options.hiddenId).value = suggestion.id;
           }
          this.textInput.value = suggestion.districtName;

       }
     this.hideSuggestions();
   },

   //
   getLeft : function () /*:int*/ {

     var oNode = this.textInput;
     var iLeft = 0;
     while(oNode.tagName != "BODY") {
       iLeft += oNode.offsetLeft;
       oNode = oNode.offsetParent;
    }

    return iLeft;
  },
   getTop : function () /*:int*/ {

     var oNode = this.textInput;
     var iTop = 0;

     while(oNode.tagName != "BODY") {
        iTop += oNode.offsetTop;
        oNode = oNode.offsetParent;
     }

     return iTop;
   },
    //显示层
   showSuggestions: function() {
      var divStyle = this.suggestionsDiv.style;
      if( divStyle.display != ''){
         this.positionSuggestionsDiv();
         divStyle.display = '';
      }
      if(isIE){
         //创建与弹出div相同样式的iframe,来修复IE6及以下版本中div不能遮住select控件的bug
         if(!this.iframeSuggestions){
            this.iframeSuggestions = document.createElement("iframe");
            var iframeStyle = this.iframeSuggestions.style;
            iframeStyle.position ='absolute';
            iframeStyle.zIndex = 100;
            iframeStyle.top = divStyle.top;
            iframeStyle.left = divStyle.left;
            iframeStyle.width = divStyle.width;
            iframeStyle.height = this.suggestionsDiv.offsetHeight;
            iframeStyle.display = '';
            this.textInput.parentNode.appendChild(this.iframeSuggestions);
         }
         var iframeStyle = this.iframeSuggestions.style;
         iframeStyle.position ='absolute';
         iframeStyle.zIndex = 100;
         iframeStyle.top = divStyle.top;
         iframeStyle.left = divStyle.left;
         iframeStyle.width = divStyle.width;
         iframeStyle.height = this.suggestionsDiv.offsetHeight;
         iframeStyle.display = '';
      }

   },
    //定位层
   positionSuggestionsDiv: function() {
      var top = (this.getTop()+this.textInput.offsetHeight) ;
      var left = this.getLeft() ;
      var width = this.textInput.offsetWidth ;

      var divStyle  = this.suggestionsDiv.style;
      divStyle.top  = top  + "px";
      divStyle.left = left + "px";

      if ( this.options.matchTextWidth ){
        divStyle.width = width+ "px";
      }

   },
    //隐藏层
   hideSuggestions: function() {
      this.suggestionsDiv.style.display = 'none';
      if(isIE){
        if(this.iframeSuggestions)
           this.iframeSuggestions.style.display = 'none';
      }
   },
    //创建层
   createSuggestionsDiv: function() {

      this.suggestionsDiv = document.createElement("div");
      this.suggestionsDiv.className = this.options.suggestDivClassName;

      var divStyle = this.suggestionsDiv.style;
      divStyle.position = 'absolute';
      divStyle.zIndex   = 101;
      divStyle.display  = "none";
      this.textInput.parentNode.appendChild(this.suggestionsDiv);
   },
    //更新层
   updateSuggestionsDiv: function() {
      this.suggestionsDiv.innerHTML = "";
      //如果有hidden变量，清空隐藏字段的值
     if(this.options.hiddenId != "" && this.options.hiddenId.length >0){
        $(this.options.hiddenId).value ="";
     }
      var suggestLines = this.createSuggestionSpans();
      for ( var i = 0 ; i < suggestLines.length ; i++ ){
        this.suggestionsDiv.appendChild(suggestLines[i]);
      }
   },
    //创建层中的选项span
   createSuggestionSpans: function() {
      var regExpFlags = "";
      if ( this.options.ignoreCase )
         regExpFlags = 'i';
      var startRegExp = "^";
      if ( this.options.matchAnywhere )
         startRegExp = '';
         //正则表达式匹配
      var regExp  = new RegExp( startRegExp + this.lastRequestString, regExpFlags );
      var suggestionSpans = new Array();
      for ( var i = 0 ; i < this.suggestions.length && i<this.options.count ; i++ )
         suggestionSpans.push( this.createSuggestionSpan( i, regExp ) )

      return suggestionSpans;
   },
    //创建单个选项span
   createSuggestionSpan: function( n, regExp ) {
      var suggestion = this.suggestions[n];

      var suggestionSpan = document.createElement("span");
      suggestionSpan.className = this.options.suggestionClassName;
      suggestionSpan.style.width   = '100%';
      suggestionSpan.style.display = 'block';
      suggestionSpan.id            = this.id + "_" + n;
      suggestionSpan.onmouseover   = this.mouseoverHandler.bindAsEventListener(this);
      suggestionSpan.onclick       = this.itemClickHandler.bindAsEventListener(this);
      var textValues = this.splitTextValues( suggestion.districtName+"",
                                             this.lastRequestString.length,
                                             regExp );
      var textMatchSpan = document.createElement("span");
      textMatchSpan.id            = this.id + "_match_" + n;
      textMatchSpan.className     = this.options.matchClassName;
      textMatchSpan.onmouseover   = this.mouseoverHandler.bindAsEventListener(this);
      textMatchSpan.onclick       = this.itemClickHandler.bindAsEventListener(this);

      textMatchSpan.appendChild( document.createTextNode(textValues.mid) );

      suggestionSpan.appendChild( document.createTextNode( textValues.start ) );
      suggestionSpan.appendChild( textMatchSpan );
      suggestionSpan.appendChild( document.createTextNode( textValues.end ) );

      //把小区地址显示在小区名后面
      //suggestionSpan.appendChild(document.createTextNode("        "+suggestion.address ) );
      suggestionSpan.innerHTML+="    "+suggestion.address;
      return suggestionSpan;
   },
    //鼠标经过处理
   mouseoverHandler: function(e) {
      var src = e.srcElement ? e.srcElement : e.target;
      var index = parseInt(src.id.substring(src.id.lastIndexOf('_')+1));
      this.updateSelection(index);
   },
    //鼠标点击处理
   itemClickHandler: function(e) {
      this.mouseoverHandler(e);
      //鼠标点击把数据set入输入框！
      this.setInputFromSelection();
      this.hideSuggestions();
   },
    //分拆字符串
   splitTextValues: function( text, len, regExp ) {
      var startPos  = text.search(regExp);
      var matchText = text.substring( startPos, startPos + len );
      var startText = startPos == 0 ? "" : text.substring(0, startPos);
      var endText   = text.substring( startPos + len );
      return { start: startText, mid: matchText, end: endText };
   },

   //如果只需要显示列表里的文字而已 可以调用此方法
   getElementContent: function(element) {
      return element.firstChild.data;
   }
};