Before implement this example first design one table userdetails in your database like as shown below
Column Name
|
Data Type
|
Allow Nulls
|
UserId
|
Int(IDENTITY=TRUE)
|
No
|
UserName
|
varchar(50)
|
Yes
|
Education
|
varchar(50)
|
Yes
|
Location
|
varchar(50)
|
Yes
|
Once we design table in our database insert some dummy data in your table to use it in our application that would be like as shown below
 |
Now create new web application à Right click on your Application à Select Add New item à Select Master Page à Click OK like as shown below
 |
Now open your master and write the code like as shown below
Master Page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jquery autocomplete textbox example with master page in asp.net</title>
<asp:ContentPlaceHolder id="head" runat="server">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
SearchText();
});
function SearchText() {
$(".autosuggest").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "AutoCompleteService.asmx/GetAutoCompleteData",
data: "{'username':'" + $('#txtSearch').val() + "'}",
dataType: "json",
success: function (data) {
if (data.d.length > 0) {
response($.map(data.d, function (item) {
return {
label: item.split('/')[0],
val: item.split('/')[1]
}
}));
}
else {
response([{ label: 'No Records Found', val: -1}]);
$('#txtSearch').val('');
}
},
error: function (result) {
alert("Error");
}
});
},
select: function (event, ui) {
if (ui.item.val == -1) {
return false;
}
//Get Selected Value
//alert(ui.item.val);
}
});
}
</script>
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
Master Page
<div class="ui-widget">
<label for="tbAuto">Enter UserName: </label>
<input type="text" id="txtSearch" class="autosuggest" />
</div>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
|
If you observe above code in header section I added some of script and css files by using those files we have a chance to display auto complete text with css style and I mentioned url field as “AutoCompleteService.asmx/GetAutoCompleteData” this mean we are calling GetAutoCompleteDatamethod from AutoCompleteService.asmx webservice.
To creat this webservice right click on your application >> Select Add New Item >> select Web Service >> Give name of service AutoCompleteService.asmx and click OK
 |
Once webservice created open code behind file and write the following code
C# Code
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Services;
/// <summary>
/// Summary description for AutoCompleteService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class AutoCompleteService : System.Web.Services.WebService {
[WebMethod]
public List<string> GetAutoCompleteData(string username)
{
List<string> result = new List<string>();
using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"))
{
using (SqlCommand cmd = new SqlCommand("select DISTINCT UserName from UserInformation where UserName LIKE '%'+@SearchText+'%'", con))
{
con.Open();
cmd.Parameters.AddWithValue("@SearchText", username);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
result.Add(dr["UserName"].ToString());
}
return result;
}
}
}
}
|
