jQuery（九）-采用jqueryui实现auotcomplete自动填充功能（连接数据库@Hibernate+struts2）
日期：2014-05-16 浏览次数：20512 次
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
