首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 开发语言 > 编程 >

仿百度、Google的suggest奇效功能,源码分析

2013-03-22 
仿百度、Google的suggest特效功能,源码分析1.简单的模仿效果图2.项目分析及总结项目描述:HibernatestrutsjQ

仿百度、Google的suggest特效功能,源码分析

1.简单的模仿效果图

仿百度、Google的suggest奇效功能,源码分析

仿百度、Google的suggest奇效功能,源码分析

仿百度、Google的suggest奇效功能,源码分析

仿百度、Google的suggest奇效功能,源码分析

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];// 创建optionvar $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>



热点排行