Introduction:-
In this
article , I have explained Auto complete textbox in asp.net using Jquery.
DataBase:-
Create table Customers(CustomerId
int,ContactName varchar(max);
Insert some dummy data in this table.
Open Visual studio -> create new website.
Add one web service file in this project.
WebService.cs:-
using System;
using
System.Collections;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.Services;
using
System.Web.Services.Protocols;
using
System.Xml.Linq;
using System.IO;
using
System.Data;
using
System.Data.SqlClient;
using
System.Configuration;
using
System.Web.Script.Services;
/// <summary>
/// Summary description for WebService
/// </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 WebService :
System.Web.Services.WebService {
public
WebService () {
//Uncomment
the following line if using designed components
//InitializeComponent();
}
[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)]
public string[] GetCustomer(string
prefix)
{
List<string> customer = new
List<string>();
using (SqlConnection con = new
SqlConnection())
{
con.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using
(SqlCommand cmd = new
SqlCommand())
{
cmd.CommandText = "Select CustomerId,ContactName from Customers where
" + "ContactName like @SearchText
+'%'";
cmd.Parameters.AddWithValue("@SearchText", prefix);
cmd.Connection = con;
con.Open();
using
(SqlDataReader dr = cmd.ExecuteReader())
{
while
(dr.Read())
{
customer.Add(string.Format("{0}-{1}",
dr["ContactName"], dr["CustomerId"]));
}
}
con.Close();
}
return
customer.ToArray();
}
}
}
Design Page:-
Put one textbox on
design page.
<asp:TextBox ID="TextBox1"
runat="server"></asp:TextBox>
<asp:HiddenField ID="hfCustomerid"
runat="server"
/>
Jquery Code:-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
type = "text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type = "text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel = "Stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function
() {
$("#<%=TextBox1.ClientID
%>").autocomplete({
source: function
(request, response) {
$.ajax({
url: '<%=ResolveUrl("~/WebService.asmx/GetCustomer")
%>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label:
item.split('-')[0],
val:
item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function
(e, i) {
$("#<%=hfCustomerid.ClientID
%>").val(i.item.val);
},
minLength: 1
});
});
</script>
Fullcode:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled
Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
type = "text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type = "text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel = "Stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function
() {
$("#<%=TextBox1.ClientID
%>").autocomplete({
source: function
(request, response) {
$.ajax({
url: '<%=ResolveUrl("~/WebService.asmx/GetCustomer")
%>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val:
item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function
(e, i) {
$("#<%=hfCustomerid.ClientID
%>").val(i.item.val);
},
minLength: 1
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:HiddenField ID="hfCustomerid" runat="server" />
</div>
</form>
</body>
</html>
