`
sprite
  • 浏览: 63082 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

使用DWR实现搜索自动提示(三)

DWRIEfreemarkerJavaScriptprototype 
阅读更多
事件处理类
js 代码
  1. //控制器类   
  2. TextSuggestKeyHandler = Class.create();   
  3.   
  4. TextSuggestKeyHandler.prototype = {   
  5.     //构造方法   
  6.    initialize: function( textSuggest,delay ) {   
  7.        //TextSuggest类的引用   
  8.       this.textSuggest = textSuggest;   
  9.       //输入框的引用   
  10.       this.input       = this.textSuggest.textInput;   
  11.       this.delay     = delay || 0.3;   
  12.       this.timer     = null;   
  13.       this.lastValue = this.input.value;   
  14.       //为输入框增加事件响应机制   
  15.       this.addKeyHandling();   
  16.    },      
  17.         
  18.    addKeyHandling: function() {         
  19.       this.input.onkeyup    = this.keyupHandler.bindAsEventListener(this);   
  20.       this.input.onkeydown  = this.keydownHandler.bindAsEventListener(this);   
  21.       this.input.onblur     = this.onblurHandler.bindAsEventListener(this);             
  22.       if ( this.textSuggest.isOpera )   
  23.          this.input.onkeypress = this.keyupHandler.bindAsEventListener(this);   
  24.    },      
  25.     //按键按下事件响应   
  26.    keydownHandler: function(e) {   
  27.       var upArrow   = 38;   
  28.       var downArrow = 40;   
  29.   
  30.       if ( e.keyCode == upArrow ) {   
  31.          this.textSuggest.moveSelectionUp();   
  32.          //匹配选中在IE下会报selectRange（）方法中的this.suggestions为空或不是对象 现也不需这功能暂时不用   
  33.           //setTimeout( this.selectRange.bind(this), 1 );   
  34.       }   
  35.       else if ( e.keyCode == downArrow ){   
  36.          this.textSuggest.moveSelectionDown();   
  37.       }   
  38.    },   
  39.     //放开按键事件响应   
  40.    keyupHandler: function(e) {             
  41.       if ( this.input.length == 0 && !this.isOpera )   
  42.             this.textSuggest.hideSuggestions();             
  43.        if ( !this.handledSpecialKeys(e) ){   
  44.         if(this.lastValue == this.input.value){   
  45.             return;    
  46.           }              
  47.         if(this.timer){   
  48.             clearTimeout(this.timer);   
  49.          }   
  50.         this.timer = setTimeout(this.onTimerEvent.bind(this), this.delay * 1000);   
  51.         this.lastValue = this.input.value;             
  52.      }           
  53.    },   
  54.       
  55.    onTimerEvent: function(){   
  56.       this.timer = null;   
  57.       this.textSuggest.handleTextInput();    
  58.    },   
  59.       
  60.     //处理特殊按键   
  61.    handledSpecialKeys: function(e) {   
  62.       var iKeyCode  = e.keyCode;   
  63.       var enterKey  = 13;   
  64.       var upArrow   = 38;   
  65.       var downArrow = 40;   
  66.       if ( iKeyCode == upArrow ||iKeyCode == downArrow ) {   
  67.          return true;   
  68.       }else if ( iKeyCode == enterKey ) {   
  69.           //回车则set入数据   
  70.          this.textSuggest.setInputFromSelection();   
  71.          return true;   
  72.       }   
  73.       if ((iKeyCode!=8 && iKeyCode < 32) || (iKeyCode >= 33 && iKeyCode <= 46) || (iKeyCode >= 112 && iKeyCode <= 123)){   
  74.          return true;   
  75.       }          
  76.       return false;   
  77.    },   
  78.     //匹配选中   
  79.    selectRange: function() {        
  80.       var suggestion  = this.suggestions[ this.selectedIndex ].districtName;         
  81.       var iStart = this.input.value.length;    
  82.       var iEnd   = suggestion.length;            
  83.        //check for support of typeahead functionality   
  84.     if (this.input.createTextRange){                    
  85.         this.input.value = suggestion;                 
  86.         var oRange = this.input.createTextRange();    
  87.         oRange.moveStart("character", iStart);    
  88.         oRange.moveEnd("character",  suggestion.length- this.input.value.length);         
  89.         oRange.select();   
  90.            
  91.     //use setSelectionRange() for Mozilla   
  92.     } else if (this.input.setSelectionRange) {   
  93.         this.input.setSelectionRange(iStart, iEnd);   
  94.     }   
  95.     //set focus back to the textInput   
  96.     this.input.focus();          
  97.        
  98.    },   
  99.     //失去焦点事件响应   
  100.    onblurHandler: function(e) {   
  101.       if ( this.textSuggest.suggestionsDiv.style.display == '' )   
  102.       //如果当前输入是显示的，那么点击其他地方应该把选择值注入输入框   
  103.          this.textSuggest.setInputFromSelection();   
  104.       this.textSuggest.hideSuggestions();   
  105.    }   
  106.   
  107. };   

 

使用freemarker封装，使其成为组件，在需要的地方能方便的使用。autocomplete.ftl如下：通过dwrmethod参数将要使用的service方法传入前端处理程序。一并传入的还有显示样式

js 代码
  1. <#include "/${parameters.templateDir}/simple/text.ftl" />   
  2. <script type="text/javascript">    
  3.   var suggestOptions = {          
  4.          //层样式   
  5.          suggestDivClassName: ${parameters.suggestDivClassName ? default("'suggestDiv'")},   
  6.          //选项样式   
  7.          suggestionClassName: ${parameters.suggestionClassName ? default("'suggestion'")},   
  8.          //匹配样式   
  9.          matchClassName     : ${parameters.matchClassName ? default("'match'")},   
  10.          //是否匹配输入框宽度   
  11.          matchTextWidth     : ${parameters.matchTextWidth ? default('true')},   
  12.          //选项颜色   
  13.          selectionColor     : ${parameters.selectionColor ? default("'#FFB55E'")},   
  14.           //是否从头匹配   
  15.          matchAnywhere      : ${parameters.matchAnywhere ? default('false')} ,   
  16.          //是否忽略大小写   
  17.          ignoreCase         : ${parameters.ignoreCase ? default('false')},   
  18.          //显示数目   
  19.          count              : ${parameters.count ? default(10)},   
  20.          //隐藏字段的Id              
  21.          hiddenId         : ${parameters.hiddenId ? default('')}    
  22.       };    
  23.    new TextSuggest('${parameters.id}',${parameters.dwrMethod}, suggestOptions);        
  24. </script>   
分享到：
| 使用DWR实现搜索自动提示(二)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics