jQueryUI的自动完成autocomplete插件与自定义的级联插件CascadingDropDown

@{

    //Layout = "~/Areas/Sys/Views/Shared/_LayoutSys.cshtml";
    string PageLayout = ViewBag.PageLayout as string;
    bool IsSysBlank = false;
    if (!string.IsNullOrEmpty(PageLayout) && PageLayout == "SysBlank")
    {
        Layout = "~/Areas/Sys/Views/Shared/_LayoutSysBlank.cshtml";
        IsSysBlank = true;
    }

    ViewBag.Title = "测试";
    //Layout = null;
}
@section Header{
    <script src="@Url.Content("~/Common/jQuery/Seekdream.js")" type="text/javascript"></script>
 <style>
 .ui-autocomplete-loading { background: white url('/Common/sys/common/images/pub/loading.gif') right center no-repeat; }
 #city { width: 25em; }
 .ui-autocomplete {
  max-height: 100px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
  /* add padding to account for vertical scrollbar */
  padding-right: 20px;
 } 
@*    input.ui-autocomplete {
  aheight: 400px;
 }*@
 
 </style>
}
@section BodyHeader{

}
@section BodyFooter{
}
@* --------------------------------------- DetailViewContent Start --------------------------------------- *@
<div>
    <table summary="" cellspacing="0" cellpadding="0">
        <caption>
        </caption>
        <tbody>
            <tr>
                <td>
                    <select id="Province" name="Province">
                        <option value="">请选择</option>
                        <option value="China110000">北京市</option>
                        <option value="China120000">天津市</option>
                        <option value="China310000">上海市</option>
                        <option value="China500000">重庆市</option>
                        <option value="China320000">江苏省</option>
                        <option value="China330000">浙江省</option>
                        <option value="China360000">江西省</option>
                        <option value="China230000">黑龙江省</option>
                        <option value="China350000">福建省</option>
                        <option value="China220000">吉林省</option>
                    </select>
                    <select id="City" name="City">
                    </select>
                    <select id="Region" name="Region">
                    </select>
                    <select id="Area" name="Area">
                    </select>
                    <button onclick="javascript:GetValue();">
                        获取</button>
                    <button onclick="javascript:SetValue();">
                        默认</button>
                </td>
            </tr>
            <tr>
                <td>

                    <input type="text" id="CommunitySearch" name="CommunitySearch" value="" />
        <div>
      当前：<span id="CommunityName"></span>
      楼号：<select id="BuildingName" name="BuildingName"></select>
        </div>
                    <input type="text" id="CommunityID" name="CommunityID" value="" />
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div id="msg">
</div>
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>

@* --------------------------------------- DetailViewContent End --------------------------------------- *@
@* --------------------------------------- 页面初始化 Start  --------------------------------------- *@
<script language="javascript" type="text/javascript">

    var vActionPath = "/Api/ApiSite/GetSysNode_ByCode";
    function GetValue() {
        var str = "Province=" + $("#Province").val() + "　　　　" + $("#Province").find("option:selected").text();
        str += "<br/>" + "City=" + $("#City").val() + "　　　　" + $("#City").find("option:selected").text();
        str += "<br/>" + "Region=" + $("#Region").val() + "　　　　" + $("#Region").find("option:selected").text();
        str += "<br/>" + "Area=" + $("#Area").val() + "　　　　" + $("#Area").find("option:selected").text();

        $("#msg").html(str);
    }

    function SetValue() {
        $("#Province").val("China350000");
        $("#Province").trigger('change');

    }

    var vActionPath2 = "http://test.lw.com/JTX/CommSale/GetCommSaleBuilding";
    $("#BuildingName").Tianya_CascadingDropDown(
            {
                promptText: '请选择楼号'
//                , selectedValue: "aa"
                                , jsonValueField: "Name"
                                , jsonTextField: "Name"

                //                , source: null              
                                , actionPath: vActionPath2
                //                , queryName: "Code"         
//                                , postData: function () { return { key: $("#CommunityID").val() }; }
            }

        );

    function GetBuilding() {
        $("#BuildingName").Tianya_CascadingDropDown(
            {
                promptText: '请选择楼号'
                , selectedValue: "aa"
                                , jsonValueField: "Name"
                                , jsonTextField: "Name"

                //                , source: null              
                                , actionPath: vActionPath2
                //                , queryName: "Code"         
                                , postData: function () { return { key: $("#CommunityID").val() }; }
            }

        );
    }

    $("#Province").Tianya_CascadingDropDown(
            {
                  promptText: '请选择省份'
                , selectedValue: "China350000"
//                , jsonValueField: "NodeCode"
//                , jsonTextField: "NodeName"  

//                , source: null              
//                , actionPath: vActionPath          
//                , queryName: "Code"         
//                , postData: function () { return { Code: "Region142"}; }
            }

        );

    $("#City").Tianya_CascadingDropDown(
            {
                  promptText: '请选择城市'
                , selectedValue: "China350100"
                , jsonValueField: "NodeCode"
                , jsonTextField: "NodeName"

                , source: "#Province"
                , actionPath: vActionPath     
                , queryName: "Code"         
                //, postData: function () { return { Code: $("#Province").val() }; }

            }

        );

    $("#Region").Tianya_CascadingDropDown(
            {
                  promptText: '请选择区县'
                , selectedValue: "China350101"
                , jsonValueField: "NodeCode"
                , jsonTextField: "NodeName"

                , source: "#City"
                , actionPath: vActionPath     
                , queryName: "Code"         
                //, postData: function () { return { Code: $("#City").val() }; }

            }

        );

    $("#Area").Tianya_CascadingDropDown(
            {
                  promptText: '请选择片区'
                , selectedValue: "China350102"
                , jsonValueField: "NodeCode"
                , jsonTextField: "NodeName"

                , source: "#Region"
                , actionPath: vActionPath     
                , queryName: "Code"         
                //, postData: function () { return { Code: $("#Region").val() }; }

            }

        );

              var cache = {}, lastXhr;

              var tmpUrl = "/JTX/CommSale/GetCommSale";
              $(document).ready(function () {
                  //*. 按钮处理
                  $(".DetailViewContent a.l-btn").linkbutton();

                  //0. 如果是Ajax版本，则手工隐藏标题(列表页、回收站列表、详情页)
                  //HidePageTitle();

                  //1.

                  SetValue();

                  //                $("#Community").autocomplete(

                  //                    {
                  //                        source: tmpUrl
                  //                        ,minLength: 1

                  //                    }

                  //                );

                  //InitAutoComplete();
                  function log(message) {
                      $("<div/>").text(message).prependTo("#log");
                      $("#log").scrollTop(0);
                  }

                  //"http://ws.geonames.org/searchJSON"
                  $("#CommunitySearch").autocomplete({
                      source: function (request, response) {
                          //                            var term = request.term;
                          //                            if (term in cache) {
                          //                                response(cache[term]);
                          //                                return;
                          //                            }

                          lastXhr = $.ajax({
                              type: "POST",
                              url: tmpUrl,
                              dataType: "json",
                              data: {
                                  key: request.term
                              },
                              success: function (data) {
                                  //                                    cache[request.term] = data;
                                  response($.map(data, function (item) {

                                      return {
                                          label: item.Name,
                                          value: item.Name,
                                          id: item.ID,
                                          desc: item.Desc
                                      }
                                  }));
                              }
                 , error: function (XMLHttpRequest, textStatus, errorThrown) {
                     // 通常情况下textStatus和errorThown只有其中一个有值  
                     alert("远程加载出现错误，代码为：" + textStatus); // the options for this ajax request 
                 }
                          });
                      },
                      scrollHeight: 400,
                      minLength: 1,
                      select: function (event, ui) {
                          if (ui.item) {
                              //$(this).val(ui.item.label);
                              AfterSelect(ui.item)
                          }
                      },
                      open: function () {
                          $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                      },
                      close: function () {
                          $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                      }
                  });

              });

              function AfterSelect(item) {

                  $("#CommunityID").val(item.id);
                  $("#CommunityName").text(item.label);
                  //$("#Building").trigger('change');
                  GetBuilding();
              }

</script>
@* --------------------------------------- 页面初始化 Start --------------------------------------- *@