In this article I am showing about how to use JQuery AutoComplete
textbox in Asp.net .
The following are the step to use AutoComplete textbox in Asp.net
by using JQuery.
1.First design the table name Category with two fields Id,Category
as follows:
2.Fill the Category details in table which you want like the
below:
3. Open VS2010 and FileàNewàEmpty WebsiteàGive the name as JQueryAutoComplete.
4. Select solutionàRight
clickà Add new Item àselect WebFormàDefault.aspx
5. Design the form with two fields one is label and one is Textbox
to enter text as follows:
6.Then write the following code in Default.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AutoComplete Text Box with jQuery</title>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css"
rel="stylesheet"
type="text/css"/>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
SearchText();
});
function
SearchText() {
$(".auto").autocomplete({
source: function(request,
response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/GetAutoCompleteData",
data: "{'CategoryName':'" +
document.getElementById('txtCategory').value
+ "'}",
dataType: "json",
success: function(data) {
response(data.d);
},
error: function(result) {
alert("Error Occurred");
}
});
}
});
}
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div
class="demo">
<div class="ui-widget">
<label
for="tbAuto">Enter
Category Name: </label>
<input
type="text"
id="txtCategory"
class="auto"
/>
</div>
</form>
</body>
</html>
7. Write the following code in Default.aspx.cs file:
using System;
using
System.Collections.Generic;
using
System.Data.SqlClient;
using
System.Web.Services;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
}
[WebMethod]
public static List<string> GetAutoCompleteData(string CategoryName)
{
List<string> result = new
List<string>();
using (SqlConnection con = new
SqlConnection("Data
Source=Naresh;Integrated Security=true;Initial Catalog=dbname"))
{
using (SqlCommand
cmd = new SqlCommand("select Category from Emergency_Category where
Category LIKE '%'+@CategoryText+'%'", con))
{
con.Open();
cmd.Parameters.AddWithValue("@CategoryText", CategoryName);
SqlDataReader dr =
cmd.ExecuteReader();
while
(dr.Read())
{
result.Add(dr["Category"].ToString());
}
return result;
}
}
}
}
8.Then build the application and run
it, you will get output and type any letter in textbox then the output will be
like below:
In this way we can implement JQuery
AutoComplete in Asp.net.
Thank You…….
