baidu google 下拉框的简单实现

最新推荐文章于 2021-11-03 14:42:44 发布

jayqean

最新推荐文章于 2021-11-03 14:42:44 发布

阅读量1.7k

点赞数

分类专栏： Div+Css JS 文章标签： div html 下拉框百度谷歌

本文链接：https://blog.csdn.net/jayqean/article/details/5752098

版权

JS 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Div+Css

2 篇文章 0 订阅

订阅专栏

（一）自定义实现

（二）采用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" οnkeyup="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
	}
}