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

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

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

 

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

①前端DOM

  <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代码(要注意要将Jquery代码放到$(function(){      }))中去执行，即页面DOM加载完毕后自动执行，否则无法触发该方法

　　　　1、Jquery代码

<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

 

 

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

 

 

 ③后台代码

 [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

 public IQueryable<INVMB> GetINVMBList()
        {
            return _dataContext.INVMB;
        }

Service

 IQueryable<INVMB> GetINVMBList();

IService