根据客户的需求,在某些输入框要实现类似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");
分享到:
相关推荐
PHP+jQuery+Ajax仿淘宝多上传按钮单文件上传
实现JQuery+ajax+mock.js模拟注册,判断输入框是否输入正确
基于Jquery+Ajax+Json实现分页显示附效果图
实现智能检索功能 autoComplete.js
代码摘自网络,经过自己改进 利用jquery+ajax+text 通过jsp+servlet实现仿百度智能提示(数据库用的oracle,不限)
php+jquery+ajax最简单例子
jQuery+Ajax+PHP无刷新分页
jquery+ajax+json例子,是一个web例子
基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp...
比较实用的简单项目,适合练习数据库的增删改查,框架与技术:SSM+Shiro+Ajax+jQuery+Thymeleaf
基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统源码.zip基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统源码.zip基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统源码.zip基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统...
javascript+jquery+ajax相关学习资料PPT
PHP+jQuery+Ajax多图片上传
PHP多文件上传插件,PHP+jQuery+Ajax多图片上传 效果查看:https://blog.csdn.net/chendongpu/article/details/123545180
PHP+jQuery+Ajax漂亮的许愿墙效果
基于Spring Boot + MyBatis + thymeleaf + MySQL + jQuery + ajax等实现轻便的图书借阅管理系统。
jQuery+ajax实现一款简单实用的异步加载分页代码,支持自定义设置分页列表数量。
jquery+ajax+asp+mysql加载更多。
JAVA___jQuery+AJAX_仿百度搜索功能,java版