日志

JQuery实现类似引擎自动提示

已有 1907 次阅读2015-6-25 16:59

我也不知道这个东西的学名是什么，暂且依据他的功能来命名吧！直接看的样子就可以了。


思路分析：
      此功能是根据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">

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

</head>

<body>

</form>

</body>

</html>

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事件，用于当文本值改变时触发

$(document).ready(function () {

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

});

     </script>

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>

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>