js 自动补全

  研究了三天自动补全jquery.autocomplete.js。其中优化的程度很大。特别是和后台的交互。我采用的是前台静态缓存。
1.加载的js、css

Java代码  

1. <script type="text/javascript" src="/front/scripts/jquery/jquery-1.4.2.min.js"></script>  
2. <script type="text/javascript" src="/front/scripts/autocomplete/jquery.autocomplete.js"></script>  
3. <link rel="stylesheet" type="text/css" href="/css/jquery.autocomplete.css" />  
4. <input type="text"  name="fund_code" id="fund_code"  />  
5. <div id="getdata"></div>  

2、autocomplete主体

Java代码  

1. <%-- 自动补全代码--%>  
2. <script type="text/javascript">  
3. $(document).ready(function(){  
4.     var data="";  
5.     $.ajax({  
6.     type: "post",  
7.     url: "AnnouncementAction.action",  
8.     dataType: "text",  
9.     success: function(msg)   
10.     {  
11.         $("#getdata").data("getdata",msg);//1、存放数据   
12.     },  
13.     async:false     
14.      
15.     });  
16.      
17.     //alert($("#getdata").data("getdata"));  
18. });  
19. $(function(){  
20.    var data = $("#getdata").data("getdata");//2、获取数据  
21.    var datas = eval("(" + data + ")")//数据转换成json格式  
22.   $("#fund_code").autocomplete(datas, {  
23.       minChars: 1,  
24.       matchCase:false,//不区分大小写  
25.       autoFill: false,  
26.       max: 10,  
27.       width:196,  
28.       formatItem: function(row, i, max,term) {  
29.           var v = $("#fund_code").val();    
30.           return  row.name + " (" + row.code + ")";  
31.           if(row.code.indexOf(v) == 0 || row.name.indexOf(v)==0)  
32.           {  
33.               return  row.name + " (" + row.code + ")";  
34.           }  
35.           else  
36.               return false;  
37.       },  
38.       formatMatch: function(row, i, max) {  
39.           return row.name + " (" + row.code+")";  
40.       },  
41.       formatResult: function(row) {  
42.          // alert(row.code);  
43.           
44.          
45.           return row.code;  
46.       },  
47.       reasultSearch:function(row,v)//本场数据自定义查询语法 注意这是我自己新加的事件  
48.       {  
49.           //自定义在code或spell中匹配  
50.           if(row.data.code.indexOf(v) == 0 || row.data.name.indexOf(v) == 0)  
51.           {  
52.               return row;  
53.           }  
54.           else  
55.               return false;              
56.       }  
57.   });  
58. });</script>  

3、后台 这里是根据我的项目来拼接json,准确的来说是拼接String ,因为我前台转换为json 

Java代码  

1. public void Autocomplete(){  
2.     //getResponse().setCharacterEncoding("utf-8");  //必须    
3.         FundBusService fs = new FundBusService();  
4.         List<DataRow> list = fs.queryFundLike();  
5.         System.out.println(list.get(0).getString("investadvisorabbrname"));  
6.         String jsonStr="";  
7.         for(int i=0;i<list.size();i++){  
8.             jsonStr += "{name:"+'"'+list.get(i).getString("secuabbr")+'"'+",code:"+'"'+list.get(i).getString("secucode")+'"'+"},";  
9.                
10.         }   
11.         String jsonStr_new =jsonStr.substring(0,jsonStr.length()-1);  
12.         String jsonStr_final="["+jsonStr_new+"]";  
13.         try {  
14.             getResponse().getWriter().print(jsonStr_final);  
15.         } catch (IOException e) {  
16.             // TODO Auto-generated catch block  
17.             e.printStackTrace();  
18.         }  
19.     return null;  
20.    }  
21. 是我拼接的测试代码  
22. public static void main(String[] args) {  
23.     String json = "{name:\"深圳\",code:\"00001\","+  
24.     "spell:\"sgs\"},{name:\"广州\",code:\"00001\","+  
25.     "spell:\"sghs\"}";  
26.     String ss ="["+json+"]";  
27.        
28.     System.out.println(ss);  
29. } 
    

根据 http://hzywy.iteye.com/blog/1901325