Jquery前端输入框自动补全与C#后台代码

场景:以往做下拉框都是使用DrowdowmList的控件进行全部数据提前加载的方式,但现在考虑到如果全部数据全部加载到下拉框后再去选择对应的记录会出现数据过于庞大, 导致

第一次时的页面加载缓慢,能否有办法解决只有在查数据的时候才去加载限定的筛选过后的几条数据,又能自动补全数据的方法呢,可以采用IQueryable<T> 延迟SQL执行。

 

方法:采用bootstrap的typeahead进行jquery自动代码补全,代码如下:

①前端DOM

Jquery前端输入框自动补全与C#后台代码
  <div class="form-group  form-group-sm">
        @Html.TextBoxFor(x => x.Search_MB001, null, new { @class = "form-control ", placeholder = "产品品号", autocomplete = "off", @style = "width:130px", @maxlength = "20" })
    </div>
前端DOM

Jquery前端输入框自动补全与C#后台代码

 

 

 ②Jquery代码(要注意要将Jquery代码放到$(function(){      }))中去执行,即页面DOM加载完毕后自动执行,否则无法触发该方法

    1、Jquery代码

Jquery前端输入框自动补全与C#后台代码
<script>
    $(function () {
        $('#Search_MB001').typeahead({
            source: function (query, process) {
                var parameter = { query: query };
                $.post('@Url.Action("ProductList")', parameter, function (data) {
                    process(data);
                    console.log(data);
                })
            }
        }
        )
    })

</script>
JS

Jquery前端输入框自动补全与C#后台代码

 

 

            2、$(function(){      }))   含义:是在html的哪个生命周期执行呢?

Jquery前端输入框自动补全与C#后台代码

 

 

 ③后台代码

Jquery前端输入框自动补全与C#后台代码
 [HttpPost]
        public ActionResult ProductList(string query)
        {
            var lst = _imvmb_LeaderService.GetINVMBList().Where(x => x.MB001.ToUpper().Contains(query.ToUpper())).OrderBy(x => x.MB001).Take(20).ToList();
            System.Collections.ArrayList list
            = new System.Collections.ArrayList();
            foreach (var item in lst)
            {
                list.Add(item.MB001.Trim());
            }
            return Json(list);
        }
Controler Jquery前端输入框自动补全与C#后台代码
 public IQueryable<INVMB> GetINVMBList()
        {
            return _dataContext.INVMB;
        }
Service Jquery前端输入框自动补全与C#后台代码
 IQueryable<INVMB> GetINVMBList();
IService

 

上一篇:SQL优化工具


下一篇:coreJSON