一、autocomplete是什么

         AutoComplete控件就是在用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便。

 

　　重要属性

 

　　1.TargetControlID:指定要实现提示功能的控件；

 

　　2.ServicePath:WebService的路径，提取数据的方法是写在一个WebService中的；

 

　　3.ServeiceMethod:写在WebService中的用于提取数据的方法的名字；

 

　　4.MinimumPrefixLength:用来设置用户输入多少字母才出现提示效果；

 

　　5.CompletionSetCount:设置提示数据的行数；

 

　　6.CompletionInterval:从服务器获取书的时间间隔，单位是毫秒。

二、利用jquery实现输入提示

    首先我们依赖的js为
jquery-1.7.2.js
jquery.autocomplete.js

下面为输入框主页面index.jsp

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   
  2. "http://www.w3.org/TR/html4/loose.dtd"> 
  3. <html> 
  4. <head> 
  5.     <link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" /> 
  6. <!--    注释掉的部门只是为了更快的加载jquery.js，效果同<script src="js/jquery-1.7.2.js"></script>  --> 
  7. <!--    <script src="http://www.google.com/jsapi"></script>   --> 
  8. <!--    <script>   --> 
  9. <!--        google.load("jquery", "1.7.1"); --> 
  10. <!--    </script> --> 
  11.     <script src="js/jquery-1.7.2.js"></script>   
  12.     <script src="js/jquery.autocomplete.js"></script>   
  13.     <style> 
  14.         input {  
  15.             font-size: 120%;  
  16.         }  
  17.     </style> 
  18. </head> 
  19. <body> 
  20.       
  21.     <h3>Country</h3> 
  22.     <input type="text" id="country" name="country"/> 
  23.       
  24.     <script> 
  25.         $("#country").autocomplete("getdata.jsp");  
  26.     </script> 
  27. </body> 
  28. </html> 

下面是负责与后台打交道的getdata.jsp

  1. <%@page import="java.util.Iterator"%> 
  2. <%@page import="java.util.List"%> 
  3. <%@page import="com.DummyDB"%> 
  4. <%  
  5.     DummyDB db = new DummyDB();  
  6. //  query是从index传过来的已输入的参数  
  7.     String query = request.getParameter("q");  
  8. //  根据后台代码及参数查询符合条件的参数，组成list  
  9.     List<String> countries = db.getData(query);  
  10. //  迭代显示  
  11.     Iterator<String> iterator = countries.iterator();  
  12.     while(iterator.hasNext()) {  
  13.         String country = (String)iterator.next();  
  14.         out.println(country);  
  15.     }  
  16. %> 

 下面是后台java对条件处理的方法类

  1. package com;  
  2.  
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5. import java.util.StringTokenizer;  
  6.  
  7. public class DummyDB {  
  8.     private int totalCountries;  
  9.     private String data = "Afghanistan, Albania, Algeria, Andorra, Angola, Antigua & Deps,"+   
  10.         "Argentina, Armenia, Australia, Austria,Azerbaijan,Bahamas,Bahrain,Bangladesh,Barbados,"+   
  11.         "Belarus,Belgium,Belize,Benin,Bhutan,Bolivia,Bosnia Herzegovina,Botswana,Brazil,Brunei,"+   
  12.         "Bulgaria,Burkina,Burundi,Cambodia,Cameroon,Canada,Cape Verde,Central African Rep,Chad,"+   
  13.         "Chile,China,Colombia,Comoros,Congo,Congo {Democratic Rep},Costa Rica,Croatia,Cuba,Cyprus,"+   
  14.         "Czech Republic,Denmark,Djibouti,Dominica,Dominican Republic,East Timor,Ecuador,Egypt,El Salvador,"+   
  15.         "Equatorial Guinea, Eritrea,Estonia,Ethiopia,Fiji,Finland,France,Gabon,Gambia,Georgia,Germany,"+   
  16.         "Ghana, Greece, Grenada,Guatemala,Guinea,Guinea-Bissau,Guyana,Haiti,Honduras,Hungary,Iceland,"+   
  17.         "India, Indonesia,Iran,Iraq,Ireland {Republic},Israel,Italy,Ivory Coast,Jamaica,Japan,"+   
  18.         "Jordan,Kazakhstan,Kenya,Kiribati,Korea North,Korea South,Kosovo,Kuwait,Kyrgyzstan,Laos,"+   
  19.         "Latvia,Lebanon,Lesotho,Liberia,Libya,Liechtenstein,Lithuania,Luxembourg,Macedonia,Madagascar,"+   
  20.         "Malawi,Malaysia,Maldives,Mali,Malta,Marshall Islands,Mauritania,Mauritius,Mexico,Micronesia,"+   
  21.         "Moldova,Monaco,Mongolia,Montenegro,Morocco,Mozambique,Myanmar, {Burma},Namibia,Nauru,Nepal,"+   
  22.         "Netherlands,New Zealand,Nicaragua,Niger,Nigeria,Norway,Oman,Pakistan,Palau,Panama,Papua New Guinea,"+   
  23.         "Paraguay,Peru,Philippines,Poland,Portugal,Qatar,Romania,Russian Federation,Rwanda,St Kitts & Nevis,"+  
  24.         "St Lucia,Saint Vincent & the Grenadines,Samoa,San Marino,Sao Tome & Principe,Saudi Arabia,Senegal,"+   
  25.         "Serbia,Seychelles,Sierra Leone,Singapore,Slovakia,Slovenia,Solomon Islands,Somalia,South Africa,"+   
  26.         "Spain,Sri Lanka,Sudan,Suriname,Swaziland,Sweden,Switzerland,Syria,Taiwan,Tajikistan,Tanzania, "+  
  27.         "Thailand,Togo,Tonga,Trinidad & Tobago,Tunisia,Turkey,Turkmenistan,Tuvalu,Uganda,Ukraine,United Arab Emirates,"+  
  28.         "United Kingdom,United States,Uruguay,Uzbekistan,Vanuatu,Vatican City,Venezuela,Vietnam,Yemen,Zambia,Zimbabwe";  
  29.     private List<String> countries;  
  30.     /**  
  31.      *   
  32.      * @brief 构造函数，同时将data字符串转化为List  
  33.      *  
  34.      */ 
  35.     public DummyDB() {  
  36.         countries = new ArrayList<String>();  
  37.         StringTokenizer st = new StringTokenizer(data, ",");  
  38.         System.out.println("DummyDB");  
  39.         while(st.hasMoreTokens()) {  
  40.             countries.add(st.nextToken().trim());  
  41.         }  
  42.         totalCountries = countries.size();  
  43.     }  
  44.     /**  
  45.      *   
  46.      * @brief 根据query条件查询出符合条件的List<String>  
  47.      *  
  48.      * @param query  
  49.      * @return  
  50.      */ 
  51.     public List<String> getData(String query) {  
  52.           
  53.         System.out.println("query:"+query);  
  54.           
  55.         String country = null;  
  56.         query = query.toLowerCase();  
  57.         List<String> matched = new ArrayList<String>();  
  58.         for(int i=0; i<totalCountries; i++) {  
  59.             country = countries.get(i).toLowerCase();  
  60.             /*这边是采用的startsWith方法，表示开始为query的String  
  61.             若换做contains方法则表示只要包含有query的就符合条件*/ 
  62.             if(country.startsWith(query)) {  
  63.                 matched.add(countries.get(i));  
  64.             }  
  65.         }  
  66.         return matched;  
  67.     }  
  68.            
  69. }  
 三、对jquery.autocomplete.js的一点修改

今天本来是要在一个输入框中输入多个用户名，然后每个用分号隔开，然后我就直接开始寻找jquery.autocomplete.js中传参的方法，终于让我给找着了：

首先，是我们输入的参数，这个参数首先会出现在onChange()方法中，
定义个全局变量用来存放已经确定的参数inputvalue = v.substring(0,v.lastIndexOf(";")+1);
然后我添加了这么一句：v = v.substring(v.lastIndexOf(";")+1);
这样，传到后面的查询条件就是最后一个分号后面的内容了

  1. function onChange() {  
  2.         // ignore if the following keys are pressed: [del] [shift] [capslock]  
  3.         if( lastKeyPressCode == 46 || (lastKeyPressCode > 8 && lastKeyPressCode < 32) ) return $results.hide();  
  4.         var v = $input.val();  
  5.           
  6.         //给全局变量赋值  
  7.         inputvalue = v.substring(0,v.lastIndexOf(";")+1);  
  8.             v = v.substring(v.lastIndexOf(";")+1);  
  9.         if (v == prev) return;  
  10.         prev = v;  
  11.         if (v.length >= options.minChars) {  
  12.             $input.addClass(options.loadingClass);  
  13.             requestData(v);  
  14.         } else {  
  15.             $input.removeClass(options.loadingClass);  
  16.             $results.hide();  
  17.         }  
  18.     }; 

 最后是返回给输入框的内容，即下面selectItem(li)方法，
其中那句$input.val(inputvalue+v);就是返回结果到输入框，我将全局变量inputvalue添加到选中的选项值v前面，这样，就能提示多个了

  1. function selectItem(li) {  
  2.           
  3.         if (!li) {  
  4.             li = document.createElement("li");  
  5.             li.extra = [];  
  6.             li.selectValue = "";  
  7.         }  
  8.         var v = $.trim(li.selectValue ? li.selectValue : li.innerHTML);  
  9.         input.lastSelected = v;  
  10.         prev = v;  
  11. //      alert("selectItem:"+v);  
  12.         $results.html("");  
  13.         $input.val(inputvalue+v);  
  14.         hideResultsNow();  
  15.         if (options.onItemSelect) setTimeout(function() { options.onItemSelect(li) }, 1);  
  16.     }; 

还有前面getdata.jsp中out.println(country);要改为  out.println(country+";");
这样，每次提示的内容就会自动加上分号了。

 

不过，后来发现貌似jquery.autocomplete.js本身就支持输入多个，中间用特殊符号隔开的，只是暂时还未尝试，下回尝试过再分享！

附上修改过的jquery.autocomplete.js