1、添加AutoCompleteExtender控件,和TextBox控件
2、创建WebServer服务方法,并加入下面代码:
[WebMethod]
public string[] GetCompletionList(string prefixText,int count)
{
int index = 0;
string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
string strSQL = "SELECT USER_ID FROM USERINFO WHERE USER_ID LIKE '" + prefixText + "%'";
OleDbConnection connection = new OleDbConnection(connectionString);
OleDbDataAdapter dda = new OleDbDataAdapter(strSQL,connectionString);
DataSet ds = new DataSet();
dda.Fill(ds);
DataTable dt = ds.Tables[0];
List<string> items = new List<string>(count);
foreach (DataRow dr in dt.Rows)
{
string strID = dr["USER_ID"].ToString();
if (index < count && index < dt.Rows.Count)
{
items.Add(strID);
}
index++;
}
return items.ToArray();
}
3、在web.config中加入连接数据库字符串配置:
<connectionStrings>
< add name="ConnectionString" connectionString="Provider=OraOLEDB.Oracle;Data Source=oracts;user id=bugdr;password=bugdr;"/>
< /connectionStrings>
4、编写HTML代码,如下:
<asp:TextBox runat="server" ID="myTextBox" Width="300" autocomplete="off" />
< ajaxToolkit:AutoCompleteExtender
runat="server"
BehaviorID="AutoCompleteEx"
ID="autoComplete1"
TargetControlID="myTextBox"
ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionList"
MinimumPrefixLength="2"
CompletionInterval="1000"
EnableCaching="true"
CompletionSetCount="20"
CompletionListCssClass="autocomplete_completionListElement"
CompletionListItemCssClass="autocomplete_listItem"
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
DelimiterCharacters=";, :">
5、添加CSS样式表
/*AutoComplete flyout */
.autocomplete_completionListElement
{
visibility : hidden;
margin : 0px!important;
background-color : inherit;
color : windowtext;
border : buttonshadow;
border-width : 1px;
border-style : solid;
cursor : 'default';
overflow : auto;
height : 200px;
text-align : left;
list-style-type : none;
}
/* AutoComplete item */
.autocomplete_listItem
{
background-color : window;
color : windowtext;
padding : 1px;
}
/* AutoComplete highlighted item */
.autocomplete_highlightedListItem
{
background-color: #ffff99;
color: black;
padding: 1px;
}