基于DWR的Ajax Suggest

java 代码

1. package  ajax.dwr.suggest;   
2.   
3. import  java.util.ArrayList;   
4. import  java.util.List;   
5.   
6. public   class  SuggestAction {   
7.      public  List findSuggest() {   
8.         List list =  new  ArrayList();   
9.          for  ( int  i =  0 ; i <  10 ; i++) {   
10.             Suggest suggest =  new  Suggest();   
11.             suggest.setValue(String.valueOf(System.currentTimeMillis() + i));   
12.              //list.add(suggest.getValue());   
13.             list.add(suggest);   
14.         }   
15.          return  list;   
16.     }   
17. }   

java 代码

1. package  ajax.dwr.suggest;   
2.   
3. public   class  Suggest {   
4.      private  String value;   
5.   
6.      public  String getValue() {   
7.          return  value;   
8.     }   
9.   
10.      public   void  setValue(String value) {   
11.          this .value = value;   
12.     }   
13. }   

js 代码

1. <style type= "text/css" >   
2. .mouseOut {   
3. background: #708090;   
4. color: #FFFAFA;   
5. }   
6. .mouseOver {   
7. background: #FFFAFA;   
8. color: #000000;   
9. }   
10. </style>   
11.   <script language= "javaScript"  src= "<%=request.getContextPath()%>/dwr/interface/SuggestAction.js" ></script>   
12.   <script type='text/javascript' src='/dwr/engine.js'></script>   
13.   <script type='text/javascript' src='/dwr/util.js'></script>   
14. <script>   
15.    var  value =  function (unit) { return  unit.value };   
16.      
17.   function  suggest() {   
18.     SuggestAction.findSuggest(loadSuggest);   
19.   }   
20.      
21.   function  loadSuggest(items)   
22.  {   
23.     setOffsets();   
24.     DWRUtil.removeAllRows( "suggest_table" );   
25.     DWRUtil.addRows( "suggest_table" ,items,cellFunctions);   
26.  }   
27.     
28.   var  cellFunctions = [   
29.    function (item) {    
30.      var  cell = document.createElement( "a" );   
31.     cell.setAttribute( "href" , "#" );   
32.     cell.style.color= "black" ;   
33.      var  txtNode = document.createTextNode(item.value);   
34.     cell.appendChild(txtNode);   
35.     cell.onmouseout =  function () { this .className='mouseOver';};   
36.     cell.onmouseover =  function () { this .className='mouseOut';};   
37.     cell.onclick =  function () { populateName( this ); } ;   
38.      return  cell;   
39.   }   
40. ];   
41.     
42. function  setOffsets() {   
43.      var  inputField = document.getElementById( "suggest_button" );   
44.      var  end = inputField.offsetWidth;   
45.      var  left = calculateOffsetLeft(inputField);   
46.      var  top = calculateOffsetTop(inputField) + inputField.offsetHeight;   
47.     popup.style.border =  "black 1px solid" ;   
48.     popup.style.left = left +  "px" ;   
49.     popup.style.top = top +  "px" ;   
50.     suggest_table.style.width = end +  "px" ;   
51. }   
52.   
53. function  calculateOffsetLeft(field) {   
54.      return  calculateOffset(field,  "offsetLeft" );   
55. }   
56.   
57. function  calculateOffsetTop(field) {   
58.      return  calculateOffset(field,  "offsetTop" );   
59. }   
60.   
61. function  calculateOffset(field, attr) {   
62.      var  offset = 0;   
63.      while (field) {   
64.         offset += field[attr];   
65.         field = field.offsetParent;   
66.     }   
67.      return  offset;   
68. }   
69.     
70.   function  populateName(cell)   
71.  {   
72.     DWRUtil.removeAllRows( "suggest_table" );   
73.     document.getElementById( "inputField" ).value = cell.firstChild.nodeValue;   
74.  }   
75.     
76.   
77.     
78. </script>