自动完成实现方法(ajax,jqueyr,webserver)

1.AJAX实现方法,如下:
网页中:

<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="CusName" ServicePath="AutoService.asmx"
TargetControlID="customer" MinimumPrefixLength="1" EnableCaching="true" >
</cc1:AutoCompleteExtender>


webserver:

        [WebMethod]
        public string[] CusName(string prefixText)
        {
            WebClass.List tmp = new WebClass.List();
            DbDataReader dr = tmp.ShowName(prefixText);

            List<string> suggestions = new List<string>();//声明一泛型集合
            while (dr.Read())
            {
                suggestions.Add(dr.GetString(0));
            }
            dr.Close();
            return suggestions.ToArray();
        }


2.JQUER实现方法,如下:
需要引入的项目:

    <link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript" type="text/javascript" src="js/jquery.js"></script>
    <script language="JavaScript" type="text/javascript" src="js/jquery.autocomplete.js"></script>
jvascript:
$(document).ready(function(){
    $("#contactperson").autocomplete("AutoHandler.ashx",{
        delay:10,
        minChars:2,
        matchSubset:1,
        cacheLength:1,
        onItemSelect:selectItem,
        onFindValue:findValue,
        autoFill:true,
        maxItemsToShow:20
    });  
}); 

ASHX:

        public void ProcessRequest(HttpContext context)
        {
            //context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");

            string prefixText = context.Request.QueryString["q"];
            WebClass.RfsList tmp = new WebClass.RfsList();
            DbDataReader dr = tmp.ShowCusName(prefixText);

            StringBuilder items = new StringBuilder();
            while (dr.Read())
            {
                items.Append(dr.GetString(0) + "\n");
            }
            dr.Close();
            context.Response.Write(items.ToString());
            context.Response.End();
        }
ASPX网页同理,css如下:
.ac_results {
	padding: 0px;
	border: 1px solid WindowFrame;
	background-color: Window;
	overflow: hidden;
}

.ac_results ul {
	 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ac_results iframe {
	display:none;/*sorry for IE5*/
	display/**/:block;/*sorry for IE5*/
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	filter:mask();
	3000px;
	height:3000px;
}

.ac_results li {
	margin: 0px;
	padding: 2px 5px;
	cursor: pointer;
	display: block;
	 100%;
	font: menu;
	font-size: 12px;
	overflow: hidden;
}

.ac_loading {
	background : Window url('../img/onload.gif') right center no-repeat;
}

.ac_over {
	background-color: Highlight;
	color: HighlightText;
}


jquery及jquery autocomplete就不贴了。
/Files/cnaspnet/jqueryautocomplete.rar

原文地址:https://www.cnblogs.com/cnaspnet/p/1751161.html