新的起點 新的開始
          

           快樂生活 ！
          
			
          
				
					
	
          
		
          
			類似Gogole autocomplete 最簡單的實現 ---- Jquery
		
          
		
              根據客戶的需求，在某些輸入框要實現類似Google的autocomplete。JQuery早就給我們提供了現成的實現。并且應用很簡單。只要最后展示的樣式，可以通過調整Css來實現。
          

          
1. 創建一個Index.jsp 引入jQuery  query.autocomplete.js 和 query.autocomplete.css。
          

           <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          
            "http://www.w3.org/TR/html4/loose.dtd">
          
             <html>
          
              <head>
          
                <link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
          
                 <script src="js/jquery-1.3.1.min.js"></script>
          
              <script src="js/jquery.autocomplete.js"></script>
          
              <style>
          
         input           {
          
             font          -size: 120%;
          
        }
          
              </style>
          
          </head>
          
           <body>
          
             <h3>Country</h3>
          
               <input type="text" id="country" name="country"/>
          

          
.               <script>
          
        $(          "#country").autocomplete("getdata.jsp");
          
               </script>
          
           </body>
          
           </html>  
          

          
2. 創建 getdata.jsp 獲取數據
          

            <%@page import="java.util.Iterator"%>
          
           <%@page import="java.util.List"%>
          
          <%@page import="net.blogjava.vincent.DummyDB"%>
          
           <%
          
    DummyDB db           = new DummyDB();
          

          
    String query           = request.getParameter("q");
          

          
    List          <String> countries = db.getData(query);
          

          
   Iterator          <String> iterator = countries.iterator();
          
             while(iterator.hasNext()) {
          
        String country           = (String)iterator.next();
          
       out.println(country);
          
     }
          
           %>  
          

          

          
3. 創建net.blogjava.vincent.DummyDB 模仿從數據源獲取數據
          

          

          /*
          
 * To change this template, choose Tools | Templates
          
 * and open the template in the editor.
          
           */
          

          
          package net.blogjava.vincent;
          

          
          import java.util.ArrayList;
          
          import java.util.List;
          
          import java.util.StringTokenizer;
          

          
          /**
          
 *
          
 *           @author Administrator
          
           */
          
          public class DummyDB {
          
               private int totalCountries;
          
               private String data = "Afghanistan, Albania, Zimbabwe";
          
               private List<String> countries;
          
               public DummyDB() {
          
         countries           = new ArrayList<String>();
          
         StringTokenizer st           = new StringTokenizer(data, ",");
          
   
          
                   while(st.hasMoreTokens()) {
          
             countries.add(st.nextToken().trim());
          
         }
          
         totalCountries           = countries.size();
          
     }
          

          
               public List<String> getData(String query) {
          
         String country           = null;
          
         query           = query.toLowerCase();
          
         List          <String> matched = new ArrayList<String>();
          
                   for(int i=0; i<totalCountries; i++) {
          
             country           = countries.get(i).toLowerCase();
          
                       if(country.startsWith(query)) {
          
                 matched.add(countries.get(i));
          
             }
          
         }
          
                   return matched;
          
     }
          
}
          

          
           Ok  Run it. See the fllowing screenshot:
          

          
目錄結構如下：
          

          

          

          

          
		
          
			posted on 2009-07-10 23:16 advincenting 閱讀(2116) 評論(3)  編輯  收藏  
		
          
	
          
	
	


	


          
	    
    


          

          評論
          
	
	
			
          
				# re: 類似Gogole autocomplete 最簡單的實現 ---- Jquery
					
						2009-07-11 18:49
					
				99網上書店
			
          
			
          
				看到了！有很大用處~~  回復  更多評論
				  
			
          
		
			
          
				# re: 類似Gogole autocomplete 最簡單的實現 ---- Jquery[未登錄]
					
						2009-07-17 11:06
					
				jerry
			
          
			
          
				LZ您好，
          在我的eclipse中，
          <script>
          		$("#country").autocomplete("getdata.jsp");
          	</script>
          中的“￥”總是提示錯誤“$  is not defined”
          請問如何解決？   回復  更多評論
				  
			
          
		
			
          
				# re: 類似Gogole autocomplete 最簡單的實現 ---- Jquery[未登錄]
					
						2009-08-19 11:21
					
				Prince
			
          
			
          
				樓上的換成jQuery  回復  更多評論
				  
			
          
		

          




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				
			
          
			
          
				
					

          公告
          
	Locations of visitors to this pageBlogJava
			
        1. 首頁
          2. 
			
        2. 新隨筆
          3. 
			
        3. 聯系
          4. 
			
        4. 聚合
			
        5. 管理
          6. 

					
          
	
          
		
          <2009年7月>
          
	
          日一二三四五六
          2829301234
          567891011
          12131415161718
          19202122232425
          2627282930311
          2345678
          

          

					

          統計
          
	
					

          常用鏈接
          


          留言簿(13)
          


		
          隨筆分類(71)
          
		
				
			
	
		
          隨筆檔案(179)
          
		
				
			
	
		
          文章檔案(13)
          
		
				
			
	
		
          新聞分類
          
		
				
			
	
		
          IT人的英語學習網站
          
		
				
			
	
		
          JAVA站點
          
		
				
			
	
		
          優秀個人博客鏈接
          
		
				
			
	
		
          官網學習站點
          
		
				
			
	
		
          生活工作站點
          
		
				
			
	


          最新隨筆
          




          搜索
          



          積分與排名
          



          最新評論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評論排行榜
          



					

				
			
          			
			
	

    







          
        
	




主站蜘蛛池模板：
民丰县|
淳化县|
南阳市|
正阳县|
尚志市|
那曲县|
陇川县|
大渡口区|
镇沅|
鄂托克前旗|
厦门市|
浦江县|
武城县|
洞头县|
龙里县|
涪陵区|
娱乐|
萍乡市|
中超|
新泰市|
综艺|
日照市|
丰都县|
连南|
中超|
逊克县|
蓬莱市|
安仁县|
西贡区|
东海县|
苍南县|
庆安县|
哈尔滨市|
长丰县|
汉川市|
金门县|
信丰县|
广昌县|
昌图县|
务川|
日土县|