jsp中施用Jquery autocomplete plugin 读取远程数据，实现信息智能提示
jsp中使用Jquery autocomplete plugin 读取远程数据，实现信息智能提示 .1. 做一个前台显示文件，代码如下：H
jsp中使用Jquery autocomplete plugin 读取远程数据，实现信息智能提示 .
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> }
