jQuery(八)-jQuery中googlesuggest的实现(数据库调用@Hibernate+struts2)
日期：2014-05-16 浏览次数：20419 次
jQuery(8)---jQuery中googlesuggest的实现(数据库调用@Hibernate+struts2)
suggest.js
页面如下：
核心源码如下：
suggest.jsp
<%@ 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="styles.css">
-->
<script type="text/javascript"
src="${ pageContext.request.contextPath}/js/jquery-1.9.1.js">
</script>
<script type="text/javascript"
src="${ pageContext.request.contextPath}/js/suggest.js">
</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;
}
.s_wds {
width: 405px;
height: 200px;
font: 16px/ 22px arial;
background: #fff;
display: none;
}
</style>
</head>
<body>
<div align="center">
<h2>jQuery中googlesuggest的实现</h2><hr/>
<div>
<input type="text" id="keyword" class="s_ipt" />
<input type="button" value="百度一下" />
</div>
<div>
<select id="words" multiple="multiple" size="10" class="s_wds"></select>
</div>
</div>
</body>
</html>
suggest.js
$(document).ready(function() {
// 给input输入框注册 keyup事件
$("#keyword").bind("keyup", function() {
$("#words").show();
// 获取收入的值
var keyVal = $(this).val();
if ("" == keyVal) {
// 清空
$("#words").empty().hide();// 对象链式操作
return;
}
// 发送ajax请求
$.post("./csdn/UserAction_keyVals.action?time=" + new Date().getTime(),
{
keyword : keyVal
}, function(data) {
// 清空
$("#words").empty();
// 获取所有的相关的数据
var jsonusers = data.users;
// 遍历数组
for (var i = 0; i < jsonusers.length; i++) {
// 得到具体的user对象
var jsonuser = jsonusers[i];
// 创建option
var $optu = $("<option></option>");
// 设置文本
$optu.text(jsonuser.name);
// 把创建的option添加到select中
$("#words").append($optu).show();
}
}, "json");
});
$("#words").bind("dblclick", function() {
$("#keyword").val($(this).val());
$("#words").empty().hide();
});
$("#words").bind("keyup", function(event) {
var key = event.which;
if (key == 13) {
$("#keyword").val($(this).val());
$("#words").empty().hide();
}
});
});
User.java
package www.csdn.project.domain;
public class User {
private String n
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
