效果如图:
页面
<div id="cc" data-options="fit:true,border:false" class="easyui-layout" style="height: 515px;"> <div data-options="region:‘north‘,title:‘筛选‘," style="height: 215px;"> <table style="width: 100%;"> <tr> <td style="text-align: right; width: 80px;"> 订单号: </td> <td> <input id="serOrderNo" name="OrderNo" class="auto" type="text" style="width: 180px;" /> </td> </tr> </table> </div> <div data-options="region:‘center‘,title:‘DeviceDelivery‘"> <table id="dg"> </table> </div> </div>
JS
<script type="text/javascript"> $(function () { fnInitForm(); }); //初始化表单 function fnInitForm() { // 样式 $(".auto").each(function (index, element) { var t = this; $(t).autocomplete("Autocomplete", { minChars: 0, width: $(t).width(), max: 30, scrollHeight: 300, matchCase: false, dataType: "json", extraParams: { matchType: function () { return $(t).attr("name"); }, matchVal: function () { return $.trim($(t).val()) } }, parse: function (data) { if (!data || data == null || data == "") { return {}; } else { return $.map(data, function (row) { return { data: row, value: row.Key, result: row.Value }; }); } }, formatItem: function (item) { return "<font color=green>" + item.Value + "</font>"; } // 绿色 }); }); }
后端Controller:
/// <summary> /// 模糊匹配 /// </summary> /// <returns></returns> [HttpGet] [Authorize] public JsonResult Autocomplete(string matchType, string matchVal) { JsonResult res = new JsonResult(); res.JsonRequestBehavior = JsonRequestBehavior.AllowGet; List<AutoModel> autoList = DeviceDal.AotoGet(matchType, matchVal); res.Data = autoList; return res; }
后端DeviceDal:
/// <summary> /// 联想匹配 /// </summary> /// <param name="matchType"></param> /// <param name="matchVal"></param> /// <returns></returns> public static List<AutoModel> AotoGet(string matchType, string matchVal) { using (SqlConnection conn = new SqlConnection(connectionString)) { String sql = "select distinct " + matchType + " matchType from *****tableName***** where " + matchType + " like ‘" + matchVal + "%‘"; List<AutoModel> res = new List<AutoModel>(); conn.Open(); SqlCommand cmd = new SqlCommand(sql, conn); SqlDataReader sdr = cmd.ExecuteReader(); while (sdr.Read()) { res.Add(new AutoModel() { Key = Convert.ToString(sdr["matchType"]), Value = Convert.ToString(sdr["matchType"]) }); } return res; } }
AutoModel.cs(全):
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DeviceDelivery.Models { public class AutoModel { public string Key { get; set; } public string Value { get; set; } } }
记录GQSF的这个写法,防止忘记。
照着写的一个:
2019.05.24。
原文:https://www.cnblogs.com/tldxh/p/10916756.html