仿百度、Google的suggest特效功能,源码分析
2013-03-20 19:03
423 查看
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>
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>
相关文章推荐
- 仿百度、Google的suggest特效功能,源码分析
- 仿百度、Google的suggest特效功能,源码分析
- android 电视盒下XBMC源码功能的简单分析
- 百度map api并未公开获取站点坐标经纬度的api接口,通过logger2js分析百度地图api源码,找出获取某条公交线各个站点经纬度的未公开方法。
- Android Volley源码分析(二) 核心功能解析
- Qt仿Android带特效的数字时钟源码分析(滑动,翻页,旋转效果)
- Google VS 百度 对搜索引擎习惯的分析
- google probuf源码分析之common.h
- PostgreSQL源码目录结构及其相关模块功能分析
- 关于GPS定位经纬度到谷歌(google)坐标以及百度(百度)坐标的转换c#源码
- Bochs源码分析-调试功能
- CoordinatorLayout自定义Bahavior特效及其源码分析
- Google Test(GTest)使用方法和源码解析——预处理技术分析和应用
- 第二人称源码分析(2)基本功能
- 蔡军生先生第二人生的源码分析(2)第二人生的基本功能
- Google官方Demo NavigationDrawer 侧边导航源码分析
- cxxtest单元测试框架源码分析(二):所有对外功能实现分析
- python使用xmlrpclib模块实现对百度google的ping功能
- Android 截图功能源码的分析
- Google首页现代舞先驱玛莎・葛兰姆JS代码分析(附源码下载)