jQuery + ajax仿google下拉列表提示功能
根据客户的需求，在某些输入框要实现类似Google的autocomplete。JQuery早就给我们提供了现成的实现。并且应用很简单。只要最后展示的样式，可以通过调整Css来实现。1. 创建一个html并 引入jQuery.jsquery.autocomplete.js 和 query.autocomplete.css
html代码：
<!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="jquery.autocomplete.css" /> <script src="jquery.js"></script> <script src="jquery.autocomplete.js"></script> <style> input { font-size: 120%; } </style> </head> <body> <h3>Country</h3> <input type="text" id="pid" name="pid"/> . <script> $("#pid").autocomplete("getdata.jsp",{ delay:10, minChars:1, matchSubset:1, matchContains:1, cacheLength:10, matchContains: true, scrollHeight: 250, width:250, autoFill:false }); </script> </body> </html>
2. 创建 getdata.jsp 获取数据
<%@ page language="java" contentType="text/html; charset=GBK"pageEncoding="GBK"%><%@page import="java.util.List"%><%@page import="com.lccert.crm.quotation.Quotation"%><%@page import="com.lccert.crm.quotation.QuotationAction"%><%String key = new String(request.getParameter("q").getBytes("iso8859-1"),"utf-8");List<Quotation> lists = QuotationAction.getInstance().searchQuotation(key,"part");for(int i=0;i<lists.size();i++) {Quotation quotation = lists.get(i);out.println(quotation.getPid());}%>
3、注意后台JSP页面：jQuery通过ajax传递的参数名是“q”，如果需要传递中文，只需要String key = new String(request.getParameter("q").getBytes("iso8859-1"),"utf-8");
页:
[1]