uid:83710的個人空間

日志

JQuery實(shí)現(xiàn)類似引擎自動提示

已有 2034 次閱讀2015-6-25 16:59

我也不知道這個東西的學(xué)名是什么，暫且依據(jù)他的功能來命名吧！直接看的樣子就可以了。


思路分析：
      此功能是根據(jù)TextBox文本框中輸入的內(nèi)容自動從數(shù)據(jù)庫中匹配可能的搜索項。

      1、需要Ajax異步獲取數(shù)據(jù)

      2、DIV設(shè)置absolutely定位包裹數(shù)據(jù)集合

      3、單擊內(nèi)容時把Value綁定到TextBox上并且DIV隱藏

局部步驟：

    1、新建一個項目，我以Asp.Net為例，并且需要導(dǎo)入、引用JQuery包（PS：如果不引用需用JavaScript實(shí)現(xiàn)，自行Google補(bǔ)腦）

      代碼：

<%@ 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">

<title>自動提示DropDownList</title>

</head>

<body>

</form>

</body>

</html>

2、新建一般處理程序進(jìn)行后臺數(shù)據(jù)處理并異步發(fā)送回客戶端

這與實(shí)現(xiàn)此功能無關(guān)，不予介紹。

3、監(jiān)聽TextBox文本值改變事件，并觸發(fā)Ajax。為了簡單Ajax端用假數(shù)據(jù)直接拼接成<ul><li></li></ul>發(fā)送回客戶端。

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";

// 假數(shù)據(jù)、并拼接成HTML

StringBuilder strHTML = new StringBuilder();

strHTML.Append("<ul>");

for (int i = 0; i < 30; i++)

{

// 此處聲明的class用戶在客戶端給li添加事件

strHTML.Append("<li class=\"dataNumber\">我是數(shù)據(jù)：" + (i + 1) + "</li>");

}

strHTML.Append("</ul>");

// 拼接成的HTML數(shù)據(jù)發(fā)送給客戶端

context.Response.Write(strHTML);

}

public bool IsReusable

{

get

{

return false;

}

        }

    以上就是服務(wù)器端回發(fā)給客戶端的數(shù)據(jù)，下面開始用JQuery實(shí)現(xiàn)主角了

    4、給TextBox注冊keyup事件，用于當(dāng)文本值改變時觸發(fā)

$(document).ready(function () {

$("#text").keyup(function () {

});

     </script>

5、TextBox文本值改變后觸發(fā)Ajax從后臺獲取數(shù)據(jù)

$(document).ready(function () {

$("#txt_SOSO").keyup(function () {

autoPrompt($("#txt_SOSO"), $("#DIV_PANLE"));

});

/* AutoDropDownList實(shí)現(xiàn)

* event:觸發(fā)的事件源

* panle:AutoDropDownList顯示的位置

*/

function autoPrompt(event, panle) {

var topY = event.position().top; // 獲取事件源的Y坐標(biāo)

var leftX = event.position().left; // 獲取事件源的X坐標(biāo)

var eWidth = event.width(); // 獲取事件源的寬度

var eValue = event.val(); // 獲取事件源的Value

/* Ajax異步獲取數(shù)據(jù) */

$.ajax({

url: "AjaxHandleResult.ashx",

type: "POST",

data: { key: eValue },

success: function (data) {

if (data != null) {

// 創(chuàng)建一個，并設(shè)置必須的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：連接服務(wù)器錯誤！");

}

});

}

</script>

ul li

{

list-style-type: none;

}

</style>

      雖然大體的樣子出來了，還是需要處理一些事件，比如說：鼠標(biāo)單擊事件，貫標(biāo)離開文本框DIV消失事件

6、Remove或Hide剛才生成的

      現(xiàn)在就用到了剛才生成<ul><li></li></ul>中的class屬性了，根據(jù)class屬性設(shè)置<li></li>單擊事件，當(dāng)單擊時隱藏并把文本值賦值給事件源。

        <script type="text/javascript">

$(document).ready(function () {

$("#txt_SOSO").keyup(function () {

autoPrompt($("#txt_SOSO"), $("#DIV_PANLE"));

});

$("#txt_SOSO").blur(function () {

setTimeout(function () { // 由于當(dāng)單擊li時blur事件先與單擊事件觸發(fā)，導(dǎo)致不能觸發(fā)click事件，顧此處用setTimeout設(shè)置延時觸發(fā)

$("#div_auto").remove();

}, 200);

});

/* AutoDropDownList實(shí)現(xiàn)

* event:觸發(fā)的事件源

* panle:AutoDropDownList顯示的位置

*/

function autoPrompt(event, panle) {

var topY = event.position().top; // 獲取事件源的Y坐標(biāo)

var leftX = event.position().left; // 獲取事件源的X坐標(biāo)

var eWidth = event.width(); // 獲取事件源的寬度

var eValue = event.val(); // 獲取事件源的Value

/* Ajax異步獲取數(shù)據(jù) */

$.ajax({

url: "AjaxHandleResult.ashx",

type: "POST",

data: { key: eValue },

success: function (data) {

if (data != null) {

// 創(chuàng)建一個，并設(shè)置必須的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：連接服務(wù)器錯誤！");

}

});

}