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

2022-01-26 15:36:29 阅读：127 来源： 互联网

标签：Jquery function 补全 C# 代码 MB001 query 加载

场景：以往做下拉框都是使用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>

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

标签：Jquery,function,补全,C#,代码,MB001,query,加载
来源： https://www.cnblogs.com/feiyankuyouta/p/15846694.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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