jQuery（9）---采用jqueryui实现auotcomplete自动填充功能（连接数据库@Hibernate+struts2） -

mywebcode

浏览: 1001063 次

最近访客更多访客>>

u012363178

qq_33632159

cshui

dd_9921

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2181)

社区版块

存档分类

2014-04 ( 138)
2014-03 ( 64)
2014-02 ( 54)
更多存档...

jQuery（9）---采用jqueryui实现auotcomplete自动填充功能（连接数据库@Hibernate+struts2）

页面如下：

源码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'suggest.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">

		<link rel="stylesheet" type="text/css"
			href="./style/jquery-ui-1.10.2.custom.css">
		<script type="text/javascript" src="./scripts/jquery-1.9.1.js"></script>
		<script type="text/javascript"
			src="./scripts/jquery-ui-1.10.2.custom.js"></script>
		<script type="text/javascript">
	$(document).ready(function() {
		//获取id="keyword"的input对象
			/*$("#keyword").autocomplete( {
			//source的两种固定写法(数组方式和数组对象)，第二种在页面显示的是value值
			source:['java','javascript','javaweb']*/
			/*source : [ {
				label : 'java开发',
				value : 'java'
			}, {
				label : 'javascript开发',
				value : 'js'
			}, {
				label : 'javaweb开发',
				value : 'web'
			} ]
			
			});*/

			//以下是从数据库获取分
			$("#keyword").autocomplete(
					{
						minLength : 1,//限定输入文本的最短长度
						source : function(request, response) {
							//alert(request.term + "-----"+ $("#keyword").val());
						//发送ajax请求
						$.post("./csdn/UserAction_keyVals.action?time="
								+ new Date().getTime(), {
							keyword : request.term
						}, function(data) {
							/*response($.map(data.users,function(u){
							return u.name;
							}));*/
							//返回含有label和value属性的操作
							response($.map(data.users,function(u){
							return {label:u.name,value:'java'};
							}));
						}, "json");

					}

					});

		});
</script>
		<style type="text/css">
.s_ipt {
	width: 405px;
	height: 30px;
	font: 16px/ 22px arial;
	margin: 5px 0 0 7px;
	background: #fff;
	outline: 0;
	-webkit-appearance: none;
}
</style>
	</head>

	<body>
		<h3 align="center">
			采用jqueryui实现auotcomplete自动填充功能
		</h3>
		<hr />

		<div align="center">
			<div>
				<input type="text" id="keyword" class="s_ipt" />
				
				<input type="button" value="百度一下" />
			</div>

		</div>
	</body>
</html>

分享到：