ASP.NET MVC搭建項目后台UI框架—11、自動加載下拉框查詢

ASP.NET MVC搭建項目后台UI框架—1、后台主框架

需求：在查詢記錄的時候，輸入第一個字，就自動把以這個字開頭的相關記錄查找出來，輸入2個字就過濾以這兩個子開頭的記錄，依次類推。

突然要用到這個功能了，印象中曾經寫過這個功能的文章，一下子找不到了，只好重新貼出來備忘。最近博客快2個月沒更新了，因為這兩個月一直在閉門寫書。

引入js和css下載地址：http://download.csdn.net/detail/zouyujie1127/9550279

  <link href="~/libs/Autocomplete/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />   

  <script src="~/libs/Autocomplete/js/jquery-ui-1.8.17.custom.min.js"></script>

在View界面添加如下js代碼：

<script type="text/javascript">
    $(function () {
        getCustomerList("CusName");});

//自動加載客戶列表 function getCustomerList(txt) { if (txt == undefined || txt == "") return; $("#"+txt).autocomplete({ source: "/Customer/GetCusNameList", minLength: 1 }); //$("#" + txt).focus(function () { // if ($(this).val() == "請輸入用戶名") { // $(this).css("color", "black").val(""); // } //}).blur(function () { // //光標離開 // if ($(this).val() == "") { // $(this).css("color", "Gray").val("請輸入用戶名"); // } //}); }

</script>

CustomerController中的List方法如下：

        /// <summary>
        /// 獲取客戶列表 模糊查詢
        /// </summary>
        /// <param name="term"></param>
        /// <returns></returns>
        public string GetCusNameList(string term)
        {
            if (string.IsNullOrWhiteSpace(term))
                return null;

            var dataSource = CustomerInfo.GetByFilter(new CustomerFilter { CusName = term });

            List<string> list = dataSource.Select(x=>x.CusName).ToList();

            //序列化對象
            System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();

            return js.Serialize(list.ToArray());
        }