jQuery+ajaxはgoogleをまねてリストを引き延ばして機能を提示します。
お客様のニーズに応じて、いくつかの入力ボックスでGoogleのようなautomipeteを実現します。JQueryはとっくに既成の実現を提供してくれています。そして応用は簡単です。最後に展示されたスタイルであれば、Cssを調整することで実現できます。
1.htmlを作成し、jQuery.jsを導入する。 query.autocomplettee.jsとquery.automete.css
htmlコード:
1.htmlを作成し、jQuery.jsを導入する。 query.autocomplettee.jsとquery.automete.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> <%@ 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());
}
%>String key = new String(request.getParameter("q").getBytes("iso8859-1"),"utf-8");