与 jQuery AutoComplete 级联

在这篇文章中，我将展示如何借助 jQuery AutoComplete UI 控件来实现级联功能，而不是像我们目前为止使用组合框控件那样。通过下面的截图，我将解释我将要在此文中实现的目标，并在之后的文章中解释我所完成的代码部分。 

屏幕 1：加载建议  

当用户在国家文本框中开始输入时，加载图像会显示正在为文本框中输入的字符加载建议。

屏幕 2：显示建议  

向最终用户显示建议列表，这些建议是从服务器获取的。 

屏幕 3：国家选择后显示州

一旦用户从建议列表中选择国家名称，州选择文本框就会显示出来。

屏幕 4：州选择后显示城市

一旦用户从建议列表中选择州名称，城市选择文本框就会显示出来。

屏幕 5：选择城市后显示搜索按钮

一旦用户从建议的城市中完成城市名称的选择，搜索按钮就会显示出来。

屏幕 6：显示搜索数据

用户点击搜索按钮后，搜索数据会显示在 GridView 控件中。

屏幕 7：“未找到数据”错误消息

当用户在文本框中输入且没有可显示的建议时，会显示错误消息。

屏幕 8：“请输入有效数据”错误消息

当按下搜索按钮且其中一个文本框值不存在时，会显示“请输入有效数据”的警告消息。 

屏幕 9：“请输入有效数据”错误消息

当按下搜索按钮且其中一个文本框的值没有建议可用时，会显示“请输入有效数据”的警告消息。正如您在截图中所见，当我输入时，自动完成功能会显示建议，一旦我选择建议，选定的值就会放在文本框中，并且另一行会显示出来，它会做同样的功能。现在在下面的文章中，我将只用一个文本框来讨论级联功能，但您可以通过下载这篇文章的完整源代码来查看所有内容。

Aspx 页面，即 HTML 标记

首先从 Aspx 页面开始，为了级联其他自动完成文本框，我对自动完成文本框进行了哪些更改

<tr id="trCountry">
  <td>
   <label id="lblCountry" runat="server" text="Select Country" width="150px">   
   </label>
  </td>
  <td>
    <div style="float: left;">

<textbox class="autosuggest" font-size="10px" id="txtCountry" runat="server" 
                  width="250px"></textbox>
<span id="spCountry" style="display:none;color:Red;">No Data Found</span>

<div style="display: none;"> 

正如您在上面看到的，div 的样式设置为 display=none，这意味着当页面在浏览器上显示时，按钮和文本框都将保持隐藏状态。

ID 为 "btnCountry" 的 Button 当用户选择了一个建议后，它的点击事件就会触发。因此，此按钮通过 JavaScript 触发服务器端事件，并使下一个级别的文本框可见。它是如何触发事件的？

<button font-size="10px" id="btnCountry" onclick="btnCountry_Click" 
                runat="server" width="250px"></button>

<textbox id="txtCountryID" runat="server"></textbox>
       </div>
    </div>
  </td>
</tr>

这个布局对于 State 和 City 下一级选择的文本框也是一样的，您可以在完整的源代码中看到。 

jQuery/Javascript

以下是 jQuery 方法，将用于显示建议，这是由 autocomplete 插件提供的。

autocomplete - 方法

由插件提供的方法，它被附加到文本框控件，当用户输入时显示建议。在上面的代码中，它被附加到 Country 文本框，这对于您可以在完整代码中看到的 State 和 City 文本框是相同的。

var pagePath = window.location.pathname;
         $(function() {

         $("#" + "<%=txtCountry.ClientID %>").autocomplete(
             {

autocomplete 的属性

source - 建议的来源，由于我从服务器端页面/函数获取数据，我使用了 jQuery ajax 函数从服务器获取列表。

success - 附加到 ajax 函数此属性的函数获取建议列表的数据，正如您所看到的，如果数据长度等于 0，则会显示 span 元素，表明数据不存在。

更多关于 ajax 函数

从客户端脚本调用服务器端函数

jQuery Ajax 调用函数

source: function(request, response) {

                     $.ajax({
                     url: pagePath + "/GetCountry",
                         data: "{ 'id': '" + request.term + "'}",
                         dataType: "json",
                         type: "POST",
                         contentType: "application/json; charset=utf-8",
                         dataFilter: function(data) { return data; },
                         success: function(data) {
                             if (data.d.length == 0) 
                                 $("#spCountry").show();
                             else
                                 $("#spCountry").hide();
                             response($.map(data.d, function(item) {
                                 {
                                     value = item.Name + " : " + item.ID;
                                     return value;
                                 }
                             }))
                         },
                         error: function(XMLHttpRequest, callStatus, errorThrown) {
                             alert(callStatus);
                         }
                     });
                 },

minLength: 1,

select: function(event, ui) {
                     var str = ui.item.label.split(":");
                     $("#" + "<%=txtCountry.ClientID %>").val(str[0]);
                     $("#" + "<%=txtCountryID.ClientID %>").val(str[1]); 
                     $("#" + "<%=btnCountry.ClientID %>").click();
                 }
             });
         });

验证函数

当用户点击搜索按钮搜索居住在哪个城市的人时，该函数会被触发，在完成国家、州和城市的选择后。

function Validate() {
      var retVal = true;
      if ($("#spCountry").is(":visible")||
            $("#spSatate").is(":visible") ||
            $("#spCity").is(":visible"))
          retVal = false;
      if($("#" + "").val()=="" ||
         $("#" + "").val()=="" ||
         $("#" + "").val()=="")
          retVal = false;
         if(!retVal) 
      alert("Enter Valid Data"); 
      return retVal;
  }

代码检查与文本框控件相关联的任何 span 元素是否可见，该元素显示错误消息“未找到数据”，并检查任何文本框是否包含空值。如果一切正常，它返回 true 值，否则返回 false。

CodeBehind 文件 - aspx.cs 文件

在 cs 文件中，我设计了一个用于测试目的的类，该类的名称是 Common，它将被 GetCountry、GetState 和 GetCity 方法使用。

public class Common
{
    public int ID { get; set; }
    public string Name { get; set; }
    public int ParentID { get; set; }
}

ID - 是唯一标识每个元素的唯一值。

Name - 是每个元素的字符串值。

ParentID - 是用于检测元素是哪个元素的子元素的值。

People 类用于在用户按下搜索按钮时将数据绑定到 GridView 控件。

public class People
{
    public string Name { get; set; }
    public string Email { get; set; }
    public int CityID { get; set; }
}

Name - 人的姓名

Email - 电子邮件地址

CityID - 是用户所属城市的 ID。

正如我之前解释过的，当用户在文本框中输入时，建议列表来自服务器端方法，下面是您可以在完整代码中找到的方法之一。GetCountry 方法在用户开始在 Country 文本框中输入时被调用。

[WebMethod]
    public static List GetCountry(string id)
    {
        try
        {
            List<common> country = new List<common> 
            {
                new Common(){ ID=1 ,Name = "India",ParentID=0 },
                new Common(){ ID=2 ,Name = "USA",ParentID=0 },
                new Common(){ ID=3 ,Name = "Ireland",ParentID=0 },
                new Common(){ ID=4 ,Name = "Australia",ParentID=0 }
            };

List lstcountry =
                        (from c in country
                         where c.Name.StartsWith(id)
                         select c).ToList();
            return lstcountry;
 
        }
        catch (Exception ex)
        {
            return null;
        }
    }

如您所见，上面的代码对集合应用 linq 查询，并定位以用户在文本框中键入的字符开头的匹配元素。 

结论 

因此，上面的文章表明，借助 jQuery autosuggest 插件提供的自动建议功能，可以轻松实现级联。

注意： 请在文章开头查找下载代码，如果您在下载源代码时遇到任何问题，或者对本文有任何疑问，请发送邮件至：pranayamr@gmail.com 或在下方发表评论。