jsp中使用Jquery autocomplete plugin 读取远程数据,实现信息智能提示

1. 做一个前台显示文件,代码如下:

HTML

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title></title>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6.     <script src="jquery/jquery-1.3.2.js"></script>  
  7.     <script src="jquery/jquery.autocomplete.js"></script>  
  8.     <link href="jquery/jquery.autocomplete.css" rel="stylesheet" type="text/css">  
  9.     <script>  
  10.          $(document).ready(function(){  
  11.            $('#book_name').autocomplete("search",{  
  12.                 minChars: 0,     
  13.                 max: 20,     
  14.                 autoFill: true,     
  15.                 mustMatch: true,     
  16.                 matchContains: true,   //true 则显示包含关键字的词  
  17.                 scrollHeight: 220,  
  18.                 formatItem: function(data, i, total) {     
  19.                   return "<I>"+data[0]+"</I>";     
  20.                 },     
  21.                 formatMatch: function(data, i, total) {     
  22.                   return data[0];     
  23.                 },     
  24.                 formatResult: function(data) {     
  25.                   return data[0];     
  26.                 }     
  27.                   
  28.             });  
  29.         });  
  30.     </script>  
  31.     
  32.   </head>  
  33.   <body>  
  34.    <div align="center" class="search_div">  
  35.             <form action="piao_search.jsp" method="post" class="search_div">  
  36.               <table align="center" width="450"><tr><td>票务名称:</td><td><input type="text" name="book_name" id="book_name" style="width:230px" title="请输入票务的名称"/></td>  
  37.               <td><input type="image" src="images/search_button.gif"/></td></tr></table>   </form>  
  38.    </div>  
  39.   </body>  
  40. </html> 

在这个前台显示文件中,读取的后台数据是来自servlet的,这个servlet的url path 为"/search"。 

 

下面给出后台servlet的代码:

Java代码 


  1. package servlets; 

  2. import actionforms.Piao;  
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5. import javax.servlet.ServletException;  
  6. import javax.servlet.http.HttpServlet;  
  7. import javax.servlet.http.HttpServletRequest;  
  8. import javax.servlet.http.HttpServletResponse;  
  9. import actions.PiaoUtil;  
  10. import java.util.List;  
  11. import java.util.Iterator;  
  12.   
  13. /** 
  14.  * 
  15.  * @author Administrator 
  16.  */  
  17. public class Search extends HttpServlet {  
  18.      
  19.     /**  
  20.     * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods. 
  21.     * @param request servlet request 
  22.     * @param response servlet response 
  23.     */  
  24.     protected void processRequest(HttpServletRequest request, HttpServletResponse response)  
  25.     throws ServletException, IOException {  
  26.         response.setContentType("text/html;charset=UTF-8");  
  27.         PrintWriter out = response.getWriter();  
  28.         PiaoUtil putil=new PiaoUtil();  
  29.         List piaos=null;  
  30.         try {  
  31.              String q=request.getParameter("q");// 参数名q是提交查询关键字的。  
  32.              piaos=putil.getAllShangjiaPiaoByName(q);  
  33.              if(piaos!=null){  
  34.                  Iterator iter=piaos.iterator();  
  35.                  while(iter.hasNext()){  
  36.                      Piao p=(Piao)iter.next();  
  37.                      out.println(p.getPiaoTitle());  
  38.                  }  
  39.              }  
  40.         }catch(Exception ex){  
  41.               
  42.         }  
  43.          finally {   
  44.             out.close();  
  45.         }  
  46.     }   
  47.   
  48.     // <editor-fold defaultstate="collapsed" desc="HttpServlet 方法。单击左侧的 + 号以编辑代码。">  
  49.     /**  
  50.     * Handles the HTTP <code>GET</code> method. 
  51.     * @param request servlet request 
  52.     * @param response servlet response 
  53.     */  
  54.     protected void doGet(HttpServletRequest request, HttpServletResponse response)  
  55.     throws ServletException, IOException {  
  56.         processRequest(request, response);  
  57.     }   
  58.   
  59.     /**  
  60.     * Handles the HTTP <code>POST</code> method. 
  61.     * @param request servlet request 
  62.     * @param response servlet response 
  63.     */  
  64.     protected void doPost(HttpServletRequest request, HttpServletResponse response)  
  65.     throws ServletException, IOException {  
  66.         processRequest(request, response);  
  67.     }  
  68.   
  69.     /**  
  70.     * Returns a short description of the servlet. 
  71.     */  
  72.     public String getServletInfo() {  
  73.         return "Short description";  
  74.     }// </editor-fold>  
  75.   


原文地址

下次可以试试ZK

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页