Net Core教程

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

本文主要是介绍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

 

这篇关于Jquery前端输入框自动补全与C#后台代码的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航