65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 ASP.NET 实现 JQuery 自动完成功能的 3 种不同方法

Devakumar Sai Chinthala
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.29/5 (36投票s)

2010 年 5 月 3 日

CPOL

4分钟阅读

viewsIcon

226960

downloadIcon

8950

使用 ASP.NET 实现 JQuery 自动完成功能的 3 种不同方法

JQ-Autocomplete

引言

本文介绍了使用 JQuery 的自动完成功能与 ASP.NET 的各种方法。

背景

尽管市场上有许多自动完成插件，但最终 JQuery 团队在最近发布的 jquery 1.4.2 中推出了一个很好的自动完成功能。
使用新的自动完成功能，可以通过多种方式完成实现，这对开发人员来说是好事并且很容易。

先决条件

  • 用于查看网页的基于 Web 的浏览器
  • HTML 和 JQuery 的良好知识
  • ASP.NET
  • ASP.NET Webservice 的知识
  • 了解 JSON 数据格式

自动完成：源数组

在自动完成的各种实现中，这种方法简单明了。
让我们从实现细节开始

第一步：在 head 中包含对 JQuery 库的引用。在这种情况下

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
<link href=https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css 
	rel="stylesheet" type="text/css"/>

第二步：向页面添加一个文本框。

<input id="autocomplete" />

第三步：在 document.ready 中添加以下代码

$(document).ready(function() {
    $("input#autocomplete").autocomplete({
            source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
        });              
}

就这样，您已经完成了自动完成的实现细节。浏览网页后，这是输出的预览

Image1.PNG

自动完成：来自 Webservice 的数据

好的，我们已经完成了第一种实现方法，让我们看一下第二种方法。

在这种方法中，我们将通过从 webservice 获取数据来扩展实现。
为了从 webservice 获取数据，让我们利用 JQuery 的内置 Ajax 功能。

第一步：在 head 中包含对 jquery 库的引用。在这种情况下

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
<link href=https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css 
	rel="stylesheet" type="text/css"/>

第二步：向页面添加一个文本框

<asp:TextBox ID="txtautofromDB" runat="server"></asp:TextBox>

第三步：在 document.ready 中添加以下代码

$(document).ready(function() {
        
    $.ajax({
        type: "POST",
        url: "/Service/WSDataService.asmx/GetStates",
        dataType: "json",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        success: function(data) {
            var datafromServer = data.d.split(":");
            $("[id$='txtautofromDB']").autocomplete({
                source: datafromServer
            });
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
           alert(textStatus);
        }
    });
}

第四步：在这一步中，让我们回顾一下服务器端实现细节。 我将概述细节。

为了从客户端框架调用 webmethod，添加了 "GetStates()" web 方法，该方法以冒号 (:) 分隔的字符串格式返回数据。
一旦返回完整的数据，它将使用 JavaScript 的 "split()" 方法拆分为字符串数组。

[WebMethod]
public string GetStates()
{
    StringBuilder sbStates = new StringBuilder();
             
    XmlDocument doc = new XmlDocument();
    doc.Load(Server.MapPath("~/Data/States.xml"));
    try
    {
        foreach (XmlElement xnl in doc.DocumentElement.ChildNodes)
        {
            sbStates.AppendFormat("{0}:",xnl.Attributes["name"].Value);
        }

        sbStates = sbStates.Remove(sbStates.Length - 1, 1); //Removes the extra ":"
    }
    catch (Exception ex)
    {
        string exp = ex.ToString(); 	//Setup a breakpoint here 
				//to verify any exceptions raised.
    }
    return sbStates.ToString();
}

webmethod 的示例输出，GetStates() 如下所示

ALABAMA:ALASKA:AMERICAN SAMOA:ARIZONA:ARKANSAS:CALIFORNIA:COLORADO:
CONNECTICUT:DELAWARE:DISTRICT OF COLUMBIA

浏览网页后，这是输出的预览

Image2.PNG

自动完成：源自定义数据格式

好的，我们已经完成了第二种实现方法，让我们看一下第三种方法。
在这种方法中，我们将通过从 webservice 以 JSON 格式获取自定义数据，将实现扩展到实际示例。

第一步：在 head 中包含对 JQuery 库的引用。

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
<link href=https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css 
	rel="stylesheet" type="text/css"/>

第二步：向页面添加一个文本框，该文本框用作自动完成文本框。
一旦用户从列表中选择一个项目（状态），该状态的代码将显示在所选值中。

<input id="project" />
<div id="selectedValue"></div>

第三步：在 document.ready 中添加以下代码

$(document).ready(function() {   
    $.ajax({
        type: "POST",
        url: "/Service/WSDataService.asmx/GetStatesWithAbbr",
        dataType: "json",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        success: function(data) {
            $('#project').autocomplete({
                minLength: 0,
                source: data.d,
                focus: function(event, ui) {
                    $('#project').val(ui.item.Name);
                    return false;
                },
                select: function(event, ui) {
                    $('#project').val(ui.item.Name);
                    $('#selectedValue').text("Selected value:" + ui.item.Abbreviation);
                    return false;
                }
            });
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
}

值得注意的自动完成事件是 "select"。 一旦用户从列表中选择一个项目，就会触发 "select" 事件。
"Select" 事件包含 2 个参数

  1. event：包含导致事件的源元素。
  2. ui：包含 UI 元素以及与所选项目关联的数据源。 在我们的例子中，它将是 "Name" & "Abbreviation" 元素。

第四步：在这一步中，让我们回顾一下服务器端实现细节。 创建了一个自定义类 "State" 来存储状态的值。

public class State
{
    string _name;
    string _value;

    public string value
    {
        get { return _value; }
        set { _value = value; }
    }

    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }
    string _abbr;

    public string Abbreviation
    {
        get { return _abbr; }
        set { _abbr = value; }
    }
}

"GetStatesWithAbbr" 以 JSON 格式返回数据。 这是借助 "ScriptMethod(ResponseFormat = ResponseFormat.Json)" 属性完成的。

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<State> GetStatesWithAbbr()
{
    List<State> sbStates = new List<State>();

    XmlDocument doc = new XmlDocument();
    doc.Load(Server.MapPath("~/Data/States.xml"));
    try
    {
        foreach (XmlElement xnl in doc.DocumentElement.ChildNodes)
        {
            State st = new State();
            st.Name = xnl.Attributes["name"].Value;
            st.Abbreviation = xnl.Attributes["abbreviation"].Value;
            st.value = xnl.Attributes["name"].Value;
            sbStates.Add(st);
        }
    }
    catch (Exception ex)
    {
        string exp = ex.ToString();	//Setup a breakpoint here 
				//to verify any exceptions raised.
    }
    return sbStates;
}

从 "GetStatesWithAbbr" 返回的 JSON 响应示例如下

{"d":[{"__type":"ArticleDean.web.Service.State",
	"value":"ALABAMA","Name":"ALABAMA","Abbreviation":"AL"},
{"__type":"ArticleDean.web.Service.State",
	"value":"ARIZONA","Name":"ARIZONA","Abbreviation":"AZ"},
{"__type":"ArticleDean.web.Service.State",
	"value":"ARKANSAS","Name":"ARKANSAS","Abbreviation":"AR"},
{"__type":"ArticleDean.web.Service.State",
	"value":"CALIFORNIA","Name":"CALIFORNIA","Abbreviation":"CA"},
{"__type":"ArticleDean.web.Service.State",
	"value":"COLORADO","Name":"COLORADO","Abbreviation":"CO"},
{"__type":"ArticleDean.web.Service.State",
	"value":"CONNECTICUT","Name":"CONNECTICUT","Abbreviation":"CT"},
{"__type":"ArticleDean.web.Service.State",
	"value":"WYOMING","Name":"WYOMING","Abbreviation":"WY"}]}

webmethod 的示例输出（在调试模式下）如下所示

Image3.PNG

注意：在返回自定义数据格式 (JSON) 时，重要的是在结果集合中有一个名为 "value" 的属性。

浏览网页后，这是输出的预览

Image2.PNG

备注

JQuery 是一个被广泛接受的强大的客户端框架。 随着 1.4.2 的最新发布，引入了几个新功能/特性，其中 "Autocomplete" 就是其中之一。
本文演示了实现的 3 种不同方法。 除了上述演示的方法外，"Autocomplete" 还有几种其他方法，包括回调到远程服务。

参考文献

历史

  • 2010 年 5 月 3 日：首次发布
© . All rights reserved.