1.简单的模仿效果图
2.项目分析及总结
项目描述:Hibernate+struts+jQuery+ajax+mysql
这也是一个整合hibernate与struts连接数据库的项目,利用jQuery实现界面布局,ajax发送请求,即获取数据,轻巧的jQuery只用了仅仅30行代码就完成模仿百度或Google的suggest的模块功能,而且还附加了双击事件和回车事件;下面附上核心源码,源码中有详细的注释。
转载请注明出处:杨凯专属频道
这里只附上核心js代码和struts代码,更多源码可以去资源模块下载,本人已免费上传至:tianyazaiheruan
3.核心代码
$(document).ready( function() { // 给input输入框注册keyup键盘点击事件 $("#keyWord").bind( "keyup", function() { // 获取输入的值 var keyVal = $(this).val(); // 判断如果输入框为空时,清空隐藏select并返回,不再执行以下代码 if ("" == keyVal) { // 清空并隐藏select框 $("#words").empty().hide(); // 对象链式操作,jQuery的特性 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 $opt = $("<option></option>"); $opt.text(jsonUser.name); // 把创建的opt添加到select中 $("#words").append($opt).show(); } }, "json"); // 为select框注册双击事件 $("#words").bind("dblclick", function() { // 为input框设值 $("#keyWord").val($(this).val()); $("#words").empty().hide(); }); // 为select框注册回车事件 $("#words").bind("keyup", function(event) { // 按键13为回车键 if (event.which == 13) { $("#keyWord").val($(this).val()); $("#words").empty().hide(); } }); }); }); Struts.Xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <include file="www/csdn/project/resource/struts-constant.xml" /> <package name="test" namespace="/csdn" extends="json-default"> <action name="UserAction_*" class="www.csdn.project.action.UserAction" method="{1}"> <result name="checkName" type="json"> <param name="root">msg</param> <!-- <param name="includeProperties">msg</param> --> </result> <result name="keyVals" type="json"> <param name="includeProperties">users\[\d+\]\.name</param> </result> <result name="input">/index.jsp</result> </action> </package> </struts>
相关推荐
仿GoogleSuggest自动补全的功能 绝对实用可用
仿google suggest仿google suggest仿google suggest仿google suggest仿google suggest
利用Visual Studio 2010和SQLserver2008基于net framework 4开发的类似google suggest自动完成功能代码。 可以使用上下键进行选择回车键选定,也可以使用鼠标点击选定。 默认是查询的系统数据库的一张表,使用时请...
采用ajax+access+asp.net一起开发的一个仿google suggest 功能的应用程序.供学习ajax技术的开发者学习参考!
仿真google suggest的自定义js文件仿真google suggest的自定义js文件仿真google suggest的自定义js文件仿真google suggest的自定义js文件仿真google suggest的自定义js文件仿真google suggest的自定义js文件仿真...
ajax仿google suggest 数据库版。。java
jquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google ...仿真google suggest dd
Flex3.0 实现 仿谷歌的 googlesuggest
NULL 博文链接:https://lc2586.iteye.com/blog/731375
Ajax google-suggest
仿googlesuggest,基于ASP的仿google猜想搜索
好东西能用,我经常用!大家共享!
google suggest 的实现,google suggest 的实现
使用ajax技术实现的google suggest,功能和google一样。参照google制作。下载后解压文件,将SuggestServlet 放在src的com.huage.ajax.servlet包下,将suggest.jsp放在WebRoot的根目录下,运行suggest.jsp即可。本...
NULL 博文链接:https://forever-xb-hotmail-com.iteye.com/blog/670313
用AJAX实现类似GOOGLE搜索框的功能
AJAX实现类Google Suggest效果 *测试平台:Firefox2.0,IE6.0,IE7.0 *演示地址:http://www.okajax.com/demo/suggest/ *:文件结构: index.htm:首页,展现效果 ajax_result.asp:ajax调用后台返回结果文件 result.asp:...
asp.net & ajax 实现 google suggest