jQuery + ajax仿google下拉列表提示功能

jQuery AJAX
回覆文章
yehlu
Site Admin
文章: 3245
註冊時間: 2004-04-15 17:20:21
來自: CodeCharge Support Engineer

jQuery + ajax仿google下拉列表提示功能

文章 yehlu »

http://tiwson.iteye.com/blog/581470

根据客户的需求,在某些输入框要实现类似Google的autocomplete。JQuery早就给我们提供了现成的实现。并且应用很简单。只要最后展示的样式,可以通过调整Css来实现。

1. 创建一个html并 引入jQuery.js query.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");
yehlu
Site Admin
文章: 3245
註冊時間: 2004-04-15 17:20:21
來自: CodeCharge Support Engineer

jQuery Plugin: Auto Complete

文章 yehlu »

回覆文章

回到「jQuery」