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

页面如下:

jQuery(9)---采用jqueryui实现auotcomplete自动填充功能(连接数据库@Hibernate+struts2)_第1张图片

源码:

<%@ 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>


你可能感兴趣的:(jQuery(9)---采用jqueryui实现auotcomplete自动填充功能(连接数据库@Hibernate+struts2))