日志
JQuery實現類似引擎自動提示
我也不知道這個東西的學名是什么，暫且依據他的功能來命名吧！直接看的樣子就可以了。
思路分析：
此功能是根據TextBox文本框中輸入的內容自動從數據庫中匹配可能的搜索項。
1、需要Ajax異步獲取數據
2、DIV設置absolutely定位包裹數據集合
3、單擊內容時把Value綁定到TextBox上并且DIV隱藏
局部步驟：
1、新建一個項目，我以Asp.Net為例，并且需要導入、引用JQuery包（PS：如果不引用需用JavaScript實現，自行Google補腦）
代碼：
思路分析：
此功能是根據TextBox文本框中輸入的內容自動從數據庫中匹配可能的搜索項。
1、需要Ajax異步獲取數據
2、DIV設置absolutely定位包裹數據集合
3、單擊內容時把Value綁定到TextBox上并且DIV隱藏
局部步驟：
1、新建一個項目，我以Asp.Net為例，并且需要導入、引用JQuery包（PS：如果不引用需用JavaScript實現，自行Google補腦）
代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="AutoDropDownListDemo.Index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>自動提示DropDownList</title>
<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<input type="text" id="txt_SOSO" />
</form>
</body>
</html>
2、 新建一般處理程序進行后臺數據處理并異步發送回客戶端
2、 新建一般處理程序進行后臺數據處理并異步發送回客戶端
這與實現此功能無關，不予介紹。
3、監聽TextBox文本值改變事件，并觸發Ajax。為了簡單Ajax端用假數據直接拼接成<ul><li></li></ul>發送回客戶端。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
namespace AutoDropDownListDemo
{
/// <summary>
/// AjaxHandleResult 的摘要說明
/// </summary>
public class AjaxHandleResult : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// 假數據、并拼接成HTML
StringBuilder strHTML = new StringBuilder();
strHTML.Append("<ul>");
for (int i = 0; i < 30; i++)
{
// 此處聲明的class用戶在客戶端給li添加事件
strHTML.Append("<li class=\"dataNumber\">我是數據：" + (i + 1) + "</li>");
}
strHTML.Append("</ul>");
// 拼接成的HTML數據發送給客戶端
context.Response.Write(strHTML);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
以上就是服務器端回發給客戶端的數據，下面開始用JQuery實現主角了
4、給TextBox注冊keyup事件，用于當文本值改變時觸發
以上就是服務器端回發給客戶端的數據，下面開始用JQuery實現主角了
4、給TextBox注冊keyup事件，用于當文本值改變時觸發
<script type="text/javascript">
$(document).ready(function () {
$("#text").keyup(function () {
});
});
</script>
5、TextBox文本值改變后觸發Ajax從后臺獲取數據
<script type="text/javascript">5、TextBox文本值改變后觸發Ajax從后臺獲取數據
$(document).ready(function () {
$("#txt_SOSO").keyup(function () {
autoPrompt($("#txt_SOSO"), $("#DIV_PANLE"));
});
});
/* AutoDropDownList實現
* event:觸發的事件源
* panle:AutoDropDownList顯示的位置
*/
function autoPrompt(event, panle) {
var topY = event.position().top; // 獲取事件源的Y坐標
var leftX = event.position().left; // 獲取事件源的X坐標
var eWidth = event.width(); // 獲取事件源的寬度
var eValue = event.val(); // 獲取事件源的Value
/* Ajax異步獲取數據 */
$.ajax({
url: "AjaxHandleResult.ashx",
type: "POST",
data: { key: eValue },
success: function (data) {
if (data != null) {
// 創建一個，并設置必須的CSS
panle.append("<div style='top:" + topY +
";left:" + leftX + ";width:" + eWidth +
"px;height:200px;background-color:#FFFFF9;overflow:auto;postion:absolute;z-index:1;'>"
+ data + "
"); }
},
eroor: function () {
alert("Error：連接服務器錯誤！");
}
});
}
</script>
<style type="text/css">
ul li
{
list-style-type: none;
}
</style>
雖然大體的樣子出來了，還是需要處理一些事件，比如說：鼠標單擊事件，貫標離開文本框DIV消失事件
6、Remove或Hide剛才生成的
現在就用到了剛才生成<ul><li></li></ul>中的class屬性了，根據class屬性 設置<li></li>單擊事件，當單擊時隱藏并把文本值賦值給事件源。
<script type="text/javascript">
$(document).ready(function () {
$("#txt_SOSO").keyup(function () {
autoPrompt($("#txt_SOSO"), $("#DIV_PANLE"));
});
$("#txt_SOSO").blur(function () {
setTimeout(function () { // 由于當單擊li時blur事件先與單擊事件觸發，導致不能觸發click事件，顧此處用setTimeout設置延時觸發
$("#div_auto").remove();
}, 200);
});
});
/* AutoDropDownList實現
* event:觸發的事件源
* panle:AutoDropDownList顯示的位置
*/
function autoPrompt(event, panle) {
var topY = event.position().top; // 獲取事件源的Y坐標
var leftX = event.position().left; // 獲取事件源的X坐標
var eWidth = event.width(); // 獲取事件源的寬度
var eValue = event.val(); // 獲取事件源的Value
/* Ajax異步獲取數據 */
$.ajax({
url: "AjaxHandleResult.ashx",
type: "POST",
data: { key: eValue },
success: function (data) {
if (data != null) {
// 創建一個，并設置必須的CSS
panle.append("<div id='div_auto'
style='top:" + topY + ";left:" + leftX + ";width:" + eWidth +
"px;height:200px;background-color:#FFFFF9;overflow:auto;postion:absolute;z-index:1;'>"
+ data + "
"); $(".dataNumber").click(function () {
event.val($(this).html());
$("#div_auto").remove();
});
}
},
eroor: function () {
alert("Error：連接服務器錯誤！");
}
});
}
</script>
<style type="text/css">
ul li
{
list-style-type: none;
}
