I've a textbox for entering employeename.When an user types the employeename,i wanted to list all the employees from database starting with that typed letter,just like a dropdownlist
I dont want any third party control.Is there any easier and understandable way for doing this??
You can use this library it's very easy a with good code
http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/AutoComplete/AutoComplete.aspx
Firstly we will use Jquery UI Auocomplete that will consume ASP.NET Web Service
(Let's say Name.asmx
).
Add reference to Jquery UI CSS
file
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
Now add reference to Jquery library
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Add reference to the Jquery UI
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
Let's say you have a textbox with class auto
<asp:TextBox ID="tbAuto" class="auto" runat="server">
</asp:TextBox>
Now we will write a script that will pass every single letter typed in the textbox
to our 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>
Finally here is the Web Service
in C#
[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.
}
Hope it will help.
Reply in case you have issues.
EDITED:
Here is the query.
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
}
Note:I have not tested this , but I think by doing few changes as per your needs it will work fine! Also try and improve this code
you can use jquery autocomplete 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
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.