baidu google 下拉框 的简单实现
（一）自定义实现
（二）采用JQuery UI实现
1.自定义实现：
本次实现采用ajax+jquery+struts2.0+hibernate3.0
下面是前台界面的HTML代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body{
text-align:center;
}
#key{
width:200px;
height:30px;
}
#hotkeys{
border:1px solid gray;
display:none;
}
#hotkeys div{
text-align:left;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var index = -1;// 下拉框所选的索引
var size = 0;// 下拉框记录的条数
function search(e){
var e = e||window.event;// 如果是ie需要取得window.envent 如果是firfox,事件可以直接从参数获得
if(e.keyCode == 38){
// 方向键向上
if(size != 0){
$("#hotkeys div").css("background","");// 取得hotkeys下的所有div 将背景清空
if(index == 0){
index = size;
}
index = index - 1;
$("#hotkeys div").eq(index).css("background","gray");// 将选定的div背景设置为灰色
// 当前选中的div的值
var value = $("#hotkeys div").eq(index).html();
// 当前选定的值设置到输入框中
$("#key").val(value);
}
}else if(e.keyCode == 40){
// 方向键向下
if(size != 0){
$("#hotkeys div").css("background","");
index = index + 1;
if(index == size){
index = 0;
}
$("#hotkeys div").eq(index).css("background","gray");
// 当前选中的div的值
var value = $("#hotkeys div").eq(index).html();
// 当前选定的值设置到输入框中
$("#key").val(value);
}
}else if(e.keyCode == 13){
// 按回车键
if(size != 0){
var value = $("#hotkeys div").eq(index).html();
$("#key").val(value);
$("#hotkeys").css("display","none");
// 提交 ....
}
}else{
var key = $("#key").val();
$.post("HotkeyAction_getKeys.action",{"name":key},function (data){
$("#hotkeys").html("");// 清空下拉框
size = 0;
// 获得xml数据，包装成jquery对象，查找所有的key元素，循环
$(data).find("key").each(function(){
size = size + 1;
// 创建div,设置内容为<key></key>里的文本值,将div加入到hotkeys div中
$("<div>").html(this.firstChild.data).appendTo("#hotkeys");
});
// 设置div的位置
var x = $("#key").offset().left;// 文本框离浏览器左边的距离
var y = $("#key").offset().top;// 文本框离浏览器上面的距离
var w = $("#key").width();// 文本框的宽度
var h = $("#key").height();// 文本框的高度
// alert(x +" "+ y +" "+ w +" "+h);
$("#hotkeys").css("position","absolute")
.css("display","block")
.width(w+8)
.offset({top:y+h+7,left:x});
});
}
}
</script>
</head>
<body>
<input type="text" id="key" onkeyup="search(event)" /><br/>
<div id="hotkeys"></div>
<script type="text/javascript">
//文本框失去焦点事件
$("#key").blur(function(){
$("#hotkeys").css("display","none");
});
</script>
</body>
</html>
HotkeyAction_getKeys.action
ajax访问的action
public class HotkeyAction extends ActionSupport implements ModelDriven{
private Hotkey hotkey = new Hotkey();
private HotkeyDao dao = new HotkeyDao();
public Object getModel() {
// TODO Auto-generated method stub
return hotkey;
}
public String getKeys(){
String name = ServletActionContext.getRequest().getParameter("name");
List keys = dao.getKeys(name);
// ActionContext.getContext().put("list", keys);
PrintWriter out = null;
try {
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/xml;charset=utf-8");
out = response.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
out.println("<?xml version=/"1.0/" ?>");
out.println("<hotkeys>");
for(int i = 0;i < keys.size();i++){
Hotkey text = (Hotkey)keys.get(i);
out.print("<key>" + text.getName() + "</key>");
}
out.println("</hotkeys>");
return null;
}
public Hotkey getHotkey() {
return hotkey;
}
public void setHotkey(Hotkey hotkey) {
this.hotkey = hotkey;
}
}
关于HotkeyDao和实体类Hotkey的代码我这就不贴出来了
struts.xml文件 访问HotkeyAction_getKeys.action 就是访问的HotkeyAction里的getKeys()
注：采用此方式，页面有缓存，会遮挡自定义弹出层，设置了z-index无效，有知道的大虾，请告知，谢了。
2.采用JQuery UI实现（地址：http://jqueryui.com/autocomplete/）
本次采用Grails框架
gsp页面：
<% String path = request.getContextPath(); %>
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
<g:set var="entityName" value="${message(code: 'radcheck.label', default: '用户信息')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery-ui-1.9.2.custom.css')}" type="text/css">
<g:javascript src="jquery-1.8.3.js" />
<g:javascript src="jquery-ui-1.9.2.custom.js" />
<script type="text/javascript">
$(document).ready(function(){
$("#tags").autocomplete({
source: function(request, response){
var user_name = $("#tags").val();
$.ajax({
url: "<%=path%>/radcheck/queryAllUserName",
dataType: "json",
data: {user_name: user_name },
success: function(data) {
response(data);
}
}
);
}
});
});
</script>
</head>
<body>
<input id="tags" name="username">
</body>
</html>
RadcheckController.groovy文件如下：
class RadcheckController {
def queryAllUserName(){
def usernameList = []
if(params.user_name && !"".equals(params.user_name.trim())){
String sql = "select username from Radcheck where username like '%"+params.user_name+"%' order by username asc"
usernameList = Radcheck.executeQuery(sql)
}
render usernameList as JSON
}
}