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

事件处理类

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>