<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 閱讀(2121) 評論(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站點
    
		
				
			
	
		
    優秀個人博客鏈接
    
		
				
			
	
		
    官網學習站點
    
		
				
			
	
		
    生活工作站點
    
		
				
			
	


    最新隨筆
    




    搜索
    



    積分與排名
    



    最新評論
	
    

    
	
			
		

    


    閱讀排行榜
    



    評論排行榜
    



					

				
			
    			
			
	

    







    
        
	



主站蜘蛛池模板：
日韩激情无码免费毛片|
中文字幕av无码无卡免费|
国产成人精品久久亚洲高清不卡
|
久久精品国产亚洲av天美18|
成年网站免费视频A在线双飞|
亚洲香蕉在线观看|
免费观看理论片毛片|
亚洲日本va在线视频观看|
久久亚洲国产成人影院|
成年女人午夜毛片免费看|
亚洲人成未满十八禁网站|
色欲色香天天天综合网站免费|
国产小视频在线观看免费|
理论亚洲区美一区二区三区|
av无码东京热亚洲男人的天堂
|
亚洲第一二三四区|
一级做a毛片免费视频|
可以免费看黄视频的网站|
亚洲自偷自偷在线成人网站传媒|
成人免费网站在线观看|
美女羞羞免费视频网站|
蜜臀AV免费一区二区三区|
亚洲综合中文字幕无线码|
免费少妇a级毛片人成网|
在线看片免费人成视频久网下载
|
亚洲一区二区中文|
一级毛片试看60分钟免费播放|
亚洲毛片av日韩av无码|
男女作爱在线播放免费网站|
亚洲天堂免费在线|
亚洲福利视频一区二区|
99精品免费观看|
亚洲a一级免费视频|
一级有奶水毛片免费看|
蜜芽亚洲av无码精品色午夜|
国产精品视频免费一区二区|
一级做a爰性色毛片免费|
亚洲国产中文在线二区三区免|
久久99热精品免费观看牛牛|
学生妹亚洲一区二区|
77777亚洲午夜久久多人|