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

阅读更多

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 = $("");
								$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



	

	

		

			
				msg
				
			

			
				users\[\d+\]\.name
			
			/index.jsp