源码下载
其他下载
ASP.ENT自动补全(用户控件版) ,支持中文,支持回车回调,支持Tab回调,支持一个页面多次使用不冲突,兼容IE5、IE6、IE7、IE8、IE9、IE10、IE11、火狐、谷歌、360浏览器(兼容模式、快速模式),其他浏览器
通过大量测试并升级的最终使用效果:
新增AjaxAutocompleteTable.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AjaxAutocompleteTable.ascx.cs"
Inherits="Unisoft.ICS.Web.UserControls.Common.AjaxAutocompleteTable" %>
<script src="/Js/jquery-1.7.1.min.js" type="text/javascript"></script>
<link href="/Js/AjaxAutocompleteTable/tautocomplete.css" rel="stylesheet" type="text/css"
charset="utf-8" />
<script src="/Js/AjaxAutocompleteTable/tautocomplete.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
eval("var <%=ViewState["ucAjaxComplete_AjaxCompleteID_" + this.AjaxComplete.ClientID]%>;");
$(document).ready(function () {
var strAjaxComplete = ("\
var col = [], coltext = '<%=ViewState["ucAjaxComplete_ColArray_" + this.AjaxComplete.ClientID]%>', colsplit;\
colsplit = coltext.split(',');\
for (var i = 0; i < colsplit.length; i++) {\
col.push(colsplit[i]);\
}\
<%=ViewState["ucAjaxComplete_AjaxCompleteID_" + this.AjaxComplete.ClientID]%> = $('#<%=this.AjaxComplete.ClientID%>').tautocomplete({\
width: '<%=ViewState["ucAjaxComplete_Width_" + this.AjaxComplete.ClientID]%>',\
placeholder: '<%=ViewState["ucAjaxComplete_Placeholder_" + this.AjaxComplete.ClientID]%>',\
cleanspelchar: true,\
barcode:false,\
columns: col,\
data: function () {\
var filterData = [];\
$.ajax({\
url: '/WebServices/AutoComplete.asmx/GetAjaxCompleteData',\
type: 'POST',\
dataType: 'json',\
async: false,\
data: { Col_1: '<%=ViewState["ucAjaxComplete_TableName_" + this.AjaxComplete.ClientID]%>', Col_2: '<%=ViewState["ucAjaxComplete_SelectorString_" + this.AjaxComplete.ClientID]%>', Col_3: '<%=ViewState["ucAjaxComplete_SortExpression_" + this.AjaxComplete.ClientID]%>', Col_4: '<%=ViewState["ucAjaxComplete_FilterString_" + this.AjaxComplete.ClientID]%>', Col_5: '<%=ViewState["ucAjaxComplete_FilterColumnString_" + this.AjaxComplete.ClientID]%>', Col_6: <%=ViewState["ucAjaxComplete_AjaxCompleteID_" + this.AjaxComplete.ClientID]%>.searchdata(), Col_7: <%=ViewState["ucAjaxComplete_TopCount_" + this.AjaxComplete.ClientID]%> },\
success: function (data) {\
for (var i = 0; i < data.length; i++) {\
filterData.push(data[i]);\
}\
}\
});\
return filterData;\
},\
onchange: function () {\
<%=ViewState["ucAjaxComplete_CallBackFunctionName_" + this.AjaxComplete.ClientID]%>(<%=ViewState["ucAjaxComplete_AjaxCompleteID_" + this.AjaxComplete.ClientID]%>);\
},\
onkeytab: function () {\
<%=ViewState["ucAjaxComplete_KeyTabCallBackFunctionName_" + this.AjaxComplete.ClientID]%>(<%=ViewState["ucAjaxComplete_AjaxCompleteID_" + this.AjaxComplete.ClientID]%>);\
}\
});\
<%=ViewState["ucAjaxComplete_AjaxCompleteID_" + this.AjaxComplete.ClientID]%>.setdata('<%=ViewState["ucAjaxComplete_AjaxCompleteText_" + this.AjaxComplete.ClientID] %>');\
");
eval(strAjaxComplete);
});
</script>
<%--
//请注意:使用当前用户控件,需要将此段代码复制到引用页的script块内,否则控件会出现异常。
function ajaxComplete[此处填写引用控件初始化时指定的AjaxCompleteID]CallBack(e) {//e=> ID:e.id();txt:e.text();
e.id();//读取ID
e.text();//读取text
[此处填写引用控件初始化时指定的AjaxCompleteID].setdata("");//设置文本框内容
[此处填写引用控件初始化时指定的AjaxCompleteID].searchdata();//读取文本框内容
[此处填写引用控件初始化时指定的AjaxCompleteID].focus();//设置文本框焦点
}
function ajaxComplete[此处填写引用控件初始化时指定的AjaxCompleteID]KeyTabCallBack(e) {
}
--%>
<asp:TextBox ID="AjaxComplete" runat="server"></asp:TextBox>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Unisoft.ICS.Web.UserControls.Common
{
public partial class AjaxAutocompleteTable : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
/// <summary>
/// 初始化自动补全控件(参数加密版)
/// this.ucAjaxAutocompleteTable.BindAutoComplete("[UserName],[LoginName]", "OA_USER", "UserID as ID,userName,LoginName", "UserID asc", "UserName,LoginName");
/// </summary>
/// <param name="AjaxCompleteID">设置AjaxComplete动态变量名(必填;说明=>传入Customer,生成的变量为:ajaxCompleteCustomer,生成回调方法为:ajaxCompleteCustomerCallBack,生成回调方法为:ajaxCompleteCustomerKeyTabCallBack)</param>
/// <param name="AjaxCompleteText">初始文本框显示内容(选填;)</param>
/// <param name="Placeholder">文本框显示的提示信息(选填;)</param>
/// <param name="ColArray">显示列名(用户名称;登陆帐号)</param>
/// <param name="TableName">表,视图名称(必填;table_name/view_name)</param>
/// <param name="SelectorString">显示字段(必填;第一列必须命名为ID,作为主键值;例:UserID as ID,UserName,LoginName)</param>
/// <param name="SortExpression">排序字段(选填)</param>
/// <param name="FilterString">筛选字段(必填;字段1,字段2,字段3)</param>
/// <param name="FilterColumnString">筛选条件(必填;IsEnable=1 and ColumnName like '%NET%')</param>
/// <param name="TopCount">显示条数(选填,不填则写0;默认10条)</param>
/// <param name="Width">结果列表div宽度(选填,不填则写"";默认265px)</param>
public void BindAutoComplete(string AjaxCompleteID, string AjaxCompleteText, string Placeholder, string ColArray, string TableName, string SelectorString, string SortExpression, string FilterString, string FilterColumnString, int TopCount, string Width)
{
ViewState["ucAjaxComplete_ColArray_" + this.AjaxComplete.ClientID] = ColArray;
ViewState["ucAjaxComplete_TableName_" + this.AjaxComplete.ClientID] = Utility.Web.Security.DESEncrypt(TableName);
ViewState["ucAjaxComplete_SelectorString_" + this.AjaxComplete.ClientID] = Utility.Web.Security.DESEncrypt(SelectorString);
ViewState["ucAjaxComplete_SortExpression_" + this.AjaxComplete.ClientID] = Utility.Web.Security.DESEncrypt(SortExpression);
ViewState["ucAjaxComplete_FilterString_" + this.AjaxComplete.ClientID] = Utility.Web.Security.DESEncrypt(FilterString);
ViewState["ucAjaxComplete_FilterColumnString_" + this.AjaxComplete.ClientID] = Utility.Web.Security.DESEncrypt(FilterColumnString);
ViewState["ucAjaxComplete_TopCount_" + this.AjaxComplete.ClientID] = TopCount;
ViewState["ucAjaxComplete_Width_" + this.AjaxComplete.ClientID] = Width;
ViewState["ucAjaxComplete_AjaxCompleteText_" + this.AjaxComplete.ClientID] = AjaxCompleteText;
ViewState["ucAjaxComplete_Placeholder_" + this.AjaxComplete.ClientID] = Placeholder;
ViewState["ucAjaxComplete_AjaxCompleteID_" + this.AjaxComplete.ClientID] = "ajaxComplete" + AjaxCompleteID;
ViewState["ucAjaxComplete_CallBackFunctionName_" + this.AjaxComplete.ClientID] = "ajaxComplete" + AjaxCompleteID + "CallBack";
ViewState["ucAjaxComplete_KeyTabCallBackFunctionName_" + this.AjaxComplete.ClientID] = "ajaxComplete" + AjaxCompleteID + "KeyTabCallBack";
}
}
}
WebService:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using Unisoft.ICS.Utility.Data;
using Unisoft.ICS.Utility.Web;
using System.Web.Script.Services;
namespace Unisoft.ICS.Web.WebServices
{
/// <summary>
/// AutoComplete 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class AutoComplete : System.Web.Services.WebService
{
/// <summary>
/// 自动补全控件(参数加密版)
/// GetAjaxCompleteData("OA_USER", "UserID as ID,userName,LoginName", "UserID asc", "UserName,LoginName","IsEnable=1","a",10);
/// </summary>
/// <param name="TableName - Col_1">表,视图名称(必填;table_name/view_name)</param>
/// <param name="SelectorString - Col_2">显示字段(必填;第一列必须命名为ID,作为主键值;例:UserID as ID,UserName,LoginName)</param>
/// <param name="SortExpression - Col_3">排序字段(选填)</param>
/// <param name="FilterString - Col_4">筛选字段(必填;字段1,字段2,字段3)</param>
/// <param name="FilterColumnString - Col_5">筛选条件(必填;IsEnable=1 and ColumnName like '%NET%')</param>
/// <param name="SearchData - Col_6">筛选内容(必填;张丽瑕)</param>
/// <param name="TopCount - Col_7">显示条数(选填;默认10条)</param>
/// <returns>
/// 输入'a',查询结果:
/// return Table
/// 1000 admin admin
/// 1001 宣网晴 xuanwangqing
/// 1002 张丽瑕 zhanglixia
/// return Json:[{"ID":1000,"userName":"admin","loginName":"admin"},{"ID":1001,"userName":"宣网晴","loginName":"xuanwangqing"},{"ID":1002,"userName":"张丽瑕","loginName":"zhanglixia"}]
/// </returns>
[WebMethod]
public void GetAjaxCompleteData(string Col_1, string Col_2, string Col_3, string Col_4, string Col_5, string Col_6, int Col_7)
{
try
{
Col_1 = Utility.Web.Security.DESDecrypt(Col_1);
Col_2 = Utility.Web.Security.DESDecrypt(Col_2);
Col_3 = Utility.Web.Security.DESDecrypt(Col_3);
Col_4 = Utility.Web.Security.DESDecrypt(Col_4);
Col_5 = Utility.Web.Security.DESDecrypt(Col_5);
if (Col_1 != string.Empty && Col_2 != string.Empty && Col_4 != string.Empty && Col_6 != string.Empty && Col_7 > 0)
{
string[] inputSplit = Col_4.Split(',');
Col_4 = string.Empty;
foreach (string item in inputSplit)
{
Col_4 += ((Col_4 != string.Empty ? " or " : "") + (item + " like ''%" + Col_6 + "%''"));
}
if (Col_5 != string.Empty)
{
Col_4 = "(" + Col_4 + ") and " + Col_5;
}
DataSet ds = DbHelperSQL.Query(string.Format("exec usp_Common_Sel_Table '{0}','{1}','{2}','{3}',{4}", Col_1, Col_2, Col_3, Col_4, Col_7));
if (ds != null && ds.Tables.Count > 0)
{
Context.Response.Charset = "UTF-8"; //设置字符集类型
Context.Response.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");
Context.Response.Write(JsonHelper.DataTableToJson(ds.Tables[0]));
}
}
else
{
Context.Response.Charset = "UTF-8"; //设置字符集类型
Context.Response.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");
Context.Response.Write("缺少必须的参数!");
}
}
catch (Exception ex)
{
Context.Response.Charset = "UTF-8"; //设置字符集类型
Context.Response.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");
Context.Response.Write(ex.Message);
}
}
}
}
JsonHelper
#region DataTable序列化json
/// <summary>
/// DataTable转为json
/// </summary>
/// <param name="dt">DataTable</param>
/// <returns>json数据</returns>
public static string DataTableToJson(DataTable dt)
{
List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
foreach (DataRow dr in dt.Rows)
{
Dictionary<string, object> result = new Dictionary<string, object>();
foreach (DataColumn dc in dt.Columns)
{
result.Add(dc.ColumnName, dr[dc]);
}
list.Add(result);
}
return SerializeDataTableToJson(list);
}
/// <summary>
/// 序列化对象为Json字符串
/// </summary>
/// <param name="obj">要序列化的对象</param>
/// <param name="recursionLimit">序列化对象的深度,默认为100</param>
/// <returns>Json字符串</returns>
public static string SerializeDataTableToJson(this object obj)
{
JavaScriptSerializer serialize = new JavaScriptSerializer();
serialize.RecursionLimit = 100;
return serialize.Serialize(obj);
}
#endregion
查询存储过程
ALTER PROCEDURE [dbo].[usp_Common_Sel_Table]
-- Add the parameters for the stored procedure here
@TableName nvarchar(128)
,@SelectorString nvarchar(500) = '*'
,@SortExpression nvarchar(200)
,@FilterString nvarchar(2000)
,@TopCount int = 0
AS
BEGIN
-- SET NOCOUNT ON added to prevent extra result sets from
-- interfering with SELECT statements.
SET NOCOUNT ON;
-- Insert statements for procedure here
DECLARE @Filter NVARCHAR(2050);
DECLARE @SqlString NVARCHAR(4000);
DECLARE @SortExp NVARCHAR(250);
DECLARE @SelectTop NVARCHAR(20);
IF @FilterString is NULL or @FilterString = ''
BEGIN
SET @Filter = ''
END
ELSE
BEGIN
SET @Filter = ' WHERE ('+ @FilterString +') '
END
IF @SortExpression is NULL or @SortExpression = ''
BEGIN
SET @SortExp = ''
END
ELSE
BEGIN
SET @SortExp = ' ORDER BY ' + @SortExpression
END
IF @TopCount > 0
BEGIN
SET @SelectTop = ' TOP('+Cast(@TopCount as Nvarchar)+') '
END
ELSE
BEGIN
SET @SelectTop = ''
END
/* Specify the parameter format one time. */
SET @SqlString = N'
SELECT ' + @SelectTop + ' ' + @SelectorString + ' FROM [' + @TableName + '] ' + @Filter + '
' + @SortExp
--PRINT @SqlString
EXECUTE sp_executesql @SqlString
END
aspx
<%@ Register Src="~/UserControls/Common/AjaxAutocompleteTable.ascx" TagName="AjaxAutocompleteTable"
TagPrefix="uc" %>
<script>
function ajaxComplete[此处填写引用控件初始化时指定的AjaxCompleteID]CallBack(e) {//e=> ID:e.id();txt:e.text();
e.id();//读取ID
e.text();//读取text
[此处填写引用控件初始化时指定的AjaxCompleteID].setdata("");//设置文本框内容
[此处填写引用控件初始化时指定的AjaxCompleteID].searchdata();//读取文本框内容
[此处填写引用控件初始化时指定的AjaxCompleteID].focus();//设置文本框焦点
}
function ajaxComplete[此处填写引用控件初始化时指定的AjaxCompleteID]KeyTabCallBack(e) {
//自动补全控件内回车事件
}
</script>
<uc:AjaxAutocompleteTable ID="ucAjaxAutocompleteTable" runat="server" />
aspx.cs Page_Load
this.ucAjaxAutocompleteTable.BindAutoComplete("", this.hidFromContractNum.Value, "请输入合同编号或合同名称查询", "[合同编号],[合同名称]",
"tbl_Sale_SaleContract", "ContractID as ID,ContractNum,htname", "ContractID desc", "ContractNum,htname",
"CompanyID=" + this.LogonUser.CompanyID, 10, "265px");