利用EasyUI combobox实现模糊搜索

利用EasyUI combobox实现模糊搜索网上已经有很多的例子,而且讲解的也非常清楚。但是好记性不如烂笔头,长时间不用就很容易忘记,所以还是做一下笔记吧

1、拖入必要的css和js

    <link href="../Script/jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet" />
    <link href="../Script/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet" />
    <script src="../Script/jquery-1.8.2.js"></script>
    <script src="../Script/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>

2、建一个input标签

<input style="200px;font-size:15px" type="text" id="txtModel" name="name" value="" />

3、js写法(这个写法多种多样)

1     <script type="text/javascript">
2         $(function () {
3             $('#txtModel').combobox({
4                 url:'../ashx/LoadModel.ashx',
5                 valueField: 'ID',
6                 textField: 'ModelName'
7             })
8         })
9     </script>

4、后台返回json数据

1         public void ProcessRequest(HttpContext context)
2         {
3             context.Response.ContentType = "text/html";
4             MyTestEntities db = new MyTestEntities();
5             var list = (from model in db.ProdModel select new { model.ID, model.ModelName }).OrderBy(c => c.ModelName).ToList();
6             JavaScriptSerializer js = new JavaScriptSerializer();
7             string jsonTemp = js.Serialize(list);
8             context.Response.Write(jsonTemp);
9         }

5、combobox的模糊查询是从头部开始的,基本不符合我们的需求,需要改一下jquery.easyui.min.js源码

return row[opts.textField].indexOf(q)==1;//(大约在10094行)
修改为
return row[opts.textField].indexOf(q)>-1;

最终实现模糊查询

原文地址:https://www.cnblogs.com/LiGengMing/p/5106119.html