[英]how to create textbox list control?
我有一個用於輸入employeename的文本框。當用戶鍵入employeename時,我想從數據庫中以該鍵入的字母開頭列出所有雇員,就像一個下拉列表一樣
我不希望任何第三方控制。是否有任何更容易理解的方法?
您可以使用此庫,只需編寫好代碼即可,非常簡單
http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/AutoComplete/AutoComplete.aspx
首先,我們將使用將消耗ASP.NET Web Service
Jquery UI Auocomplete
(假設Name.asmx
)。
添加對Jquery UI CSS
文件的引用
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
現在添加對Jquery library
引用
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
添加對Jquery UI
引用
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
假設您有一個帶有auto
類的文本框
<asp:TextBox ID="tbAuto" class="auto" runat="server">
</asp:TextBox>
現在,我們將編寫一個腳本,該腳本會將textbox
鍵入的每個單個字母傳遞給我們的Web Service
(Name.asmx)
。
<script type="text/javascript">
$(function() {
$(".auto").autocomplete({
source: function(request, response) {
$.ajax({
url: "Name.asmx/FetchNames",
data: "{ 'name': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return data; },
success: function(data) {
response($.map(data.d, function(item) {
return {
value: item.Name
}
}))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2
});
});
</script>
最后是C#
的Web Service
[WebMethod]
public List<string> FetchNames(string name)
{
//Write your query to get names that begin with the letter passed as parameter and return results
//Remember return the results by converting it to List.
}
希望它會有所幫助。
如果有問題,請回復。
編輯:
這是查詢。
SqlDataReader rdr = null;
SqlConnection con = null;
SqlCommand cmd = null;
List<string> empName=new List<string>();
try
{
// Open connection to the database
string ConnectionString = "server=yourservername;uid=sa;"+
"pwd=yourpswd; database=yourdatabase";
con = new SqlConnection(ConnectionString);
con.Open();
// Set up a command with the given query and associate
// this with the current connection.
string CommandText = "SELECT FirstName" +
" FROM Employees" +
" WHERE (FirstName LIKE +name%)";
cmd = new SqlCommand(CommandText);
cmd.Connection = con;
// Execute the query
rdr = cmd.ExecuteReader();
while(rdr.Read())
{
empName.Add(rdr["FirstName"].ToString());
}
return empName;
}
catch(Exception ex)
{
// Print error message
}
注意:我尚未對此進行測試,但我認為,根據您的需要進行一些更改即可正常工作! 同時嘗試改進此代碼
您可以使用jquery自動完成api:
$(document).ready(function () {
$("#<%=ApplicationSearchResult.ClientID %>").autocomplete({ //applicationSearchResult is your textbox
source: function (request, response) {
$.ajax({
type: "POST",
url: "Dashboard.aspx/GetTreeNodesByText", // the function you have to call to bring you the data
data: "{'text': '" + request.term + "'}", // the letter the user entered in the textbox
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
response(data.d);
}
});
},
minLength: 1
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.