Hi friends,in this article I will explain about ASP.NET TextBox AutoComplete using JQuery or JSON.
I already explained in the previous articles about JQuery:Remove Multiple Rows in GridView With Ctrl Key in ASP.NET using C#/VB.NET,Move Gridview Rows Up and Down by using JQuery in ASP.NET using C#.NET/VB.NET,How to Validate Date in Different(Any) formats using C#.NET/VB.NET and ASP.NET How to get all file names in a folder using C#/VB.NET
Write the below code in the .aspx page
ASP.NET:
Write the below code in the .aspx page
ASP.NET:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>ASP.NET TextBox AutoCaomplete using JQuery or JSON</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var arr = [];
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "JQueryAutoCompleteJSON.aspx/GetEmployeeName",
data: "{}",
dataType: "json",
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
arr[i] = data.d[i].empName;
}
},
error: function (result) {
alert("Error");
}
});
$("#tags").autocomplete({
source:arr
});
});
</script>
<style type="text/css">
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</form>
</body>
</html>
|
In C#:
using System.Web.Services;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
public partial class JQueryAutoCompleteJSON : System.Web.UI.Page
{
[WebMethod]
public static EmpDetails[] GetEmployeeName()
{
DataTable dt = new DataTable();
List<EmpDetails> empNames = new List<EmpDetails>();
SqlConnection con = newSqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
SqlCommand cmd = new SqlCommand("select * from employee", con);
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
foreach (DataRow drow in dt.Rows)
{
EmpDetails emp = new EmpDetails();
emp.empName = drow["name"].ToString();
empNames.Add(emp);
}
con.Close();
return empNames.ToArray();
}
public class EmpDetails
{
public string empName { get; set; }
}
}
|
In VB.NET:
Imports System.Web.Services
Imports System.Data.SqlClient
Imports System.Data
Imports System.Configuration
Partial Public Class JQueryAutoCompleteJSON
Inherits System.Web.UI.Page
<WebMethod()> _
Public Shared Function GetEmployeeName() As EmpDetails()
Dim dt As New DataTable()
Dim empNames As New List(Of EmpDetails)()
Dim con As NewSqlConnection(
ConfigurationManager.ConnectionStrings("con").ConnectionString)
Dim cmd As New SqlCommand("select * from employee", con)
con.Open()
Dim da As New SqlDataAdapter(cmd)
da.Fill(dt)
For Each drow As DataRow In dt.Rows
Dim emp As New EmpDetails()
emp.empName = drow("name").ToString()
empNames.Add(emp)
Next
con.Close()
Return empNames.ToArray()
End Function
Public Class EmpDetails
Public Property empName() As String
Get
Return m_empName
End Get
Set(ByVal value As String)
m_empName = Value
End Set
End Property
Private m_empName As String
End Class
End Class
|
The output of the above page as shown in below.
Next Article>>JQuery:Remove Multiple Rows in GridView With Ctrl Key
"If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook pageAspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog for more articles."
No comments:
Post a Comment