Jquery autocomplete plugin 读取远程数据的应用

88570299

2011-10-14

关注关注

1. 做一个前台显示文件，代码如下：

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="jquery/jquery-1.3.2.js"></script>
    <script src="jquery/jquery.autocomplete.js"></script>
    <link href="jquery/jquery.autocomplete.css" rel="stylesheet" type="text/css">
    <script>
         $(document).ready(function(){
           $('#book_name').autocomplete("search",{
                minChars: 0,   
                max: 20,   
                autoFill: true,   
                mustMatch: true,   
                matchContains: true,   //true 则显示包含关键字的词
                scrollHeight: 220,
                formatItem: function(data, i, total) {   
                  return "<I>"+data[0]+"</I>";   
                },   
                formatMatch: function(data, i, total) {   
                  return data[0];   
                },   
                formatResult: function(data) {   
                  return data[0];   
                }   
                
            });
        });
    </script>
  
  </head>
  <body>
   <div align="center" class="search_div">
            <form action="piao_search.jsp" method="post" class="search_div">
              <table align="center" width="450"><tr><td>票务名称：</td><td><input type="text" name="book_name" id="book_name" style="width:230px" title="请输入票务的名称"/></td>
              <td><input type="image" src="images/search_button.gif"/></td></tr></table>   </form>
   </div>
  </body>
</html>

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

下面给出后台servlet的代码：

Java代码

package servlets;

import actionforms.Piao;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import actions.PiaoUtil;
import java.util.List;
import java.util.Iterator;

/**
 *
 * @author Administrator
 */
public class Search extends HttpServlet {
   
    /** 
    * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
    * @param request servlet request
    * @param response servlet response
    */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        PiaoUtil putil=new PiaoUtil();
        List piaos=null;
        try {
             String q=request.getParameter("q");// 参数名q是提交查询关键字的。
             piaos=putil.getAllShangjiaPiaoByName(q);
             if(piaos!=null){
                 Iterator iter=piaos.iterator();
                 while(iter.hasNext()){
                     Piao p=(Piao)iter.next();
                     out.println(p.getPiaoTitle());
                 }
             }
        }catch(Exception ex){
            
        }
         finally { 
            out.close();
        }
    } 

    // <editor-fold defaultstate="collapsed" desc="HttpServlet 方法。单击左侧的 + 号以编辑代码。">
    /** 
    * Handles the HTTP <code>GET</code> method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    } 

    /** 
    * Handles the HTTP <code>POST</code> method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

    /** 
    * Returns a short description of the servlet.
    */
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>

}

显示结果为：

总结：

这个autocomplete plugin 相对来说是比较好用的，帮程序员大大提高效率。但是，有一个问题：这个插件在浏览器兼容上面还是做得不是很好，在Opera上输入中文时就不能在onchange事件时提交查询。

autocomplete jquery