<rt id="bn8ez"></rt>
<label id="bn8ez"></label>
  • 

    • <span id="bn8ez"></span>
    

    <label id="bn8ez"><meter id="bn8ez"></meter></label>
    

    
    

    




    







												


        

    新的起點 新的開始
    

     快樂生活 ！
    
			
    
				
					
	
    
		
    
			類似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 閱讀(2114) 評論(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
			
  • 首頁
    • 
			
  • 新隨筆
    • 
			
  • 聯系
    • 
			
  • 聚合
			
  • 管理
    • 

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

    

					

    統計
    
	
					

    常用鏈接
    


    留言簿(13)
    


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


    最新隨筆
    




    搜索
    



    積分與排名
    



    最新評論
	
    

    
	
			
		

    


    閱讀排行榜
    



    評論排行榜
    



					

				
			
    			
			
	

    







    
        
	



主站蜘蛛池模板：
91视频精品全国免费观看|
亚洲精品国产精品国自产网站|
亚洲国产精品18久久久久久|
欧洲精品成人免费视频在线观看
|
亚洲中文字幕精品久久|
天天操夜夜操免费视频|
亚洲欧美日韩自偷自拍|
免费看a级黄色片|
羞羞漫画小舞被黄漫免费|
成人亚洲网站www在线观看
|
国产美女无遮挡免费视频|
亚洲线精品一区二区三区影音先锋|
乱人伦中文视频在线观看免费|
4399影视免费观看高清直播|
久久综合亚洲色HEZYO社区|
AV无码免费永久在线观看|
亚洲国产日韩精品|
欧洲人免费视频网站在线|
亚洲午夜久久久精品影院|
www.av在线免费观看|
亚洲VA中文字幕无码一二三区|
亚洲成人免费在线|
亚洲an日韩专区在线|
免费人成视网站在线观看不卡|
亚洲不卡中文字幕|
国产成人精品免费视频软件|
久久久WWW成人免费精品|
久久91亚洲精品中文字幕|
国产在线观看免费观看不卡|
亚洲嫩草影院久久精品|
久久久久免费看黄A片APP|
自拍偷自拍亚洲精品偷一|
亚洲精品无码乱码成人|
亚洲视频免费在线看|
高潮毛片无遮挡高清免费视频|
九月丁香婷婷亚洲综合色|
成人免费网站在线观看|
www.av在线免费观看|
97se亚洲国产综合自在线|
亚洲国产人成中文幕一级二级|
最近2019免费中文字幕视频三|