利用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;
最终实现模糊查询