Ajax自动完成(autocomplete)-响应文本框输入后显示模糊数据列表
导入样式和脚本:
<script src="../JS/jquery.autocomplete.js" type="text/javascript"></script> <link href="../Css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
加载模糊数据列表的脚本:
$(document).ready(function() { $("#txtOrgName").autocomplete("../Business/OrderCustList.ashx", { delay: 10, minChars: 1, matchSubset: 1, cacheLength: 1, onItemSelect: selectItem, onFindValue: findValue, autoFill: false, maxItemsToShow: 20, formatItem: function(row, i, max) { var vd = eval("(" + row + ")"); return vd.OrgName; }, formatResult: function(row) { var vd = eval("(" + row + ")"); return vd.OrgName; } }).result(function(event, data, formatted) { //data 的数据格式 {{OrgName:'{0}',OrgCode:'{1}',LinkMan:'{2}',MobilePhone:'{3}',OfficePhone:'{4}',Address:'{5}',PostCode:'{6}',Remark:'{7}'}}, }); }); var timeout; var vflag = false; // 标志是否查询到数据 var GetCustInfoByName = function() { vflag = false; if ($("#txtOrgName").val() != "" && vflag == false) { StarSoft.UI.CRM.CustomerAdd.GetCustModelByName($("#txtOrgName").val(), <%=UserInfo.OrgId % >, function(data) { vflag = true; if (data.value == null || data.value == "") { } else { eval(data.value); } }, 3); } }
前台文本框:
<webcontrol:UserTextBox ID="txtOrgName" onblur="GetCustInfoByName();" FieldName="CustomerName" RequiredFieldType="字符校验" runat="server" CanBeNull="False" AutoCompleteType="Disabled" Width="80%"></webcontrol:UserTextBox>
OrderCustList.ashx.cs部分代码:
public void ProcessRequest(HttpContext context) { DataSet ds = null; string key = null; context.Response.ContentType = "text/plain"; // 必须继承IReadOnlySessionState接口,再使用Session获得登录者的UserInfo信息 // 判断是那个页面传来的值 if (context.Request.UrlReferrer.LocalPath.IndexOf("/CustomerAdd.aspx") != -1) { ds = bll.GetListOrg(" OrgName LIKE '%" + key + "%' and ORgType in (4, 5, 6, 7, 9, 12, 13, 15) "); context.Response.Write(GetList(ds)); return; } //返回ds: //。。 context.Response.Write(GetList(ds)); }
效果图: