baidu google 下拉框 的简单实现
本次实现采用ajax+jquery+struts2.0+hibernate3.0
主要贴出本人写的重要点的源码
下面是前台界面的HTML代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <mce: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; } --></mce:style><style type="text/css" mce_bogus="1"> body{ text-align:center; } #key{ width:200px; height:30px; } #hotkeys{ border:1px solid gray; display:none; } #hotkeys div{ text-align:left; } </style> <mce:script type="text/javascript" src="js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script> <mce: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+5) .offset({top:y+h+5,left:x}); }); } } // --></mce:script> </head> <body> <input type="text" id="key" οnkeyup="search(event)" /><br/> <div id="hotkeys"> </div> <mce:script type="text/javascript"><!-- //文本框失去焦点事件 $("#key").blur(function(){ $("#hotkeys").css("display","none"); }); // --></mce: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()
baidu google 下拉框 的简单实现相关推荐
- android自定义三级下拉,Android自定义下拉框的简单实现
安卓自带的Spinner不会用啊,换个图片都好麻烦,更别提做各种自定义的效果了 自己尝试着写了个能用的 实现思路: 给予一个控件点击事件,弹出PopupWindow,通过对PopupWindow内的控 ...
- 下拉框处理（select）
在UI自动化测试过程中,经常会遇到一些下拉框,我们有三种可选方式来操作下拉框. 第一种方法 基于webdriver的两次click,很容易出现问题,不建议使用.(由于部分下拉框在点击一次后,失去焦点再 ...
- 什么是今日头条下拉词下拉框？
什么是今日头条下拉词下拉框? 什么是今日头条下拉词下拉框?简单的来说,今日头条下拉词下拉框跟百度.搜狗下拉词下拉框这些是同样的原理跟道理. 下拉框就是在网页或者app搜索某个关键词的时候,会出现一个下 ...
- php select下拉框,下拉框处理（select）
在UI自动化测试过程中,经常会遇到一些下拉框,我们有三种可选方式来操作下拉框. 第一种方法 基于webdriver的两次click,很容易出现问题,不建议使用.(由于部分下拉框在点击一次后,失去焦点再 ...
- 【Vue】通过Vue操作表单元素（下拉框、选择框）等示例（图文+完整代码）
代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8&q ...
- [安卓开发] 下拉框Spinner与适配器ArrayAdapter/SimpleAdapter的使用
目录 简单介绍Spinner和Adapter ArrayAdapter实现以对话框形式展示下拉框(纯文字) Simple实现以对话框形式展示下拉框(图片加文字) 简单介绍Spinner和Adapter ...
- layui多级联动下拉框的实现_简单三级联动的实现
当我们做一些例如注册页面的时候,可能会遇到要选择地址的操作,这时会出现三个选择框,当你选择省级单位的时候会自动在选择筐中,弹出她所属的市级单位的列表,当选择市级单位时又会弹出县级单位,我们要实现的就是 ...
- Example017简单的下拉框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 安卓 spinner下拉框 做模糊查询_用图表控件做一个简单的员工信息查询系统
前几天在上课的时候有同学说在做人员的信息查询的时候,经常的要去做查找搜索很麻烦,能不能做一个简单的人员信息查询系统,只需要选择人员的编号就可以查询到这个员工的信息.其实要实现这个同学的需求在EXCEL ...
最新文章
- vc采集网页内frame框架下所有元素（不指定具体table/form）
- nginx 官方手册 php,nginx + php 的配置
- 标题在图表上_从零开始学Excel——标题和图例的设置（143）
- 【培训稿件】构建WCF面向服务的应用程序(包含ppt,源代码)
- Angular之简单的登录注册
- [转载] AUML——Schedules and Events
- “全息数字人”——健康医疗 大数据应用的新模式
- 五种方法，教你如何在Mac上查看文件完整路径
- 0-n-1中缺失的数字
- php oracle 存储过程 返回值,PHP 调用 Oracle 存储过程 之 查询
- java 打印数据_Java 中的打印流
- ext数据库读取动态添加window组件
- CE教程第八步之多级指针
- 51单片机开发板、usb写代码、pcb版
- v-model修饰符.lazy详解
- 数据科学数据清理和可视化，适合使用python的初学者
- 基于最大似然估计与卡尔曼滤波的室内目标跟踪
- 韦东山嵌入式linux第一期_裸机实战之开发板熟悉与体验篇
- 协调世界时--UTC
- 2016OSC源创会年终盛典-综合技术专场-惠新宸