仿百度、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 = $("<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為Enter鍵
							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>