Introduction:
Here I will explain how to populate jQuery autocomplete textbox in master page using web service example in asp.net using c#, vb.net or bind or fill a jQuery autocomplete textbox example with master page using web service in asp.net using c#, vb.net or jQuery autocomplete textbox with content page and master page example in asp.net using c#, vb.net.
Description:
In previous articles I explained jQuery google currency conversion as per exchange rates example, jQuery countdown timer example, jQuery increase or decrease font size of website, jQuery autocomplete textbox with multiple words in asp.net, jQuery autocomplete with images in asp.net and many articles relating to autocomplete, css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to implement jQuery autocomplete textbox in master page using web service example in asp.net using c#, vb.net with example.
In previous articles I explained jQuery google currency conversion as per exchange rates example, jQuery countdown timer example, jQuery increase or decrease font size of website, jQuery autocomplete textbox with multiple words in asp.net, jQuery autocomplete with images in asp.net and many articles relating to autocomplete, css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to implement jQuery autocomplete textbox in master page using web service example in asp.net using c#, vb.net with example.
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 GetAutoCompleteData method 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;
}
}
}
}
|
VB.NET
Code
Imports System.Collections.Generic
Imports System.Data.SqlClient
Imports System.Web.Services
''' <summary>
''' Summary description for AutoCompleteService
''' </summary>
' To allow this Web Service to be called from
script, using ASP.NET AJAX, uncomment the following line.
<WebService([Namespace]:="http://tempuri.org/")>
_
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)>
_
<System.Web.Script.Services.ScriptService()> _
Public Class AutoCompleteService
Inherits
System.Web.Services.WebService
<WebMethod()> _
Public Function GetAutoCompleteData(ByVal
username As String)
As List(Of String)
Dim result As New List(Of String)()
Using con As New
SqlConnection("Data
Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB")
Using cmd As New SqlCommand("select DISTINCT UserName from UserInformation
where UserName LIKE '%'+@SearchText+'%'", con)
con.Open()
cmd.Parameters.AddWithValue("@SearchText",
username)
Dim dr As SqlDataReader = cmd.ExecuteReader()
While dr.Read()
result.Add(dr("UserName").ToString())
End While
Return result
End Using
End Using
End Function
End Class
|
Now open your aspx page and inherit master page
properties and write the code like as shown below
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="ContentPageAuto.aspx.cs"
Inherits="ContentPageCalendar"
MasterPageFile="~/MasterPage.master"
%>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<p>Child Page</p>
</asp:Content>
|
Now run your application and check autocomplete
textbox in master page
Demo
test
 |
Download
Sample Code Attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
2 comments :
Hello Sir,
Me program is showing this error
{"Message":"Object reference not set to an instance of an object.","StackTrace":" at autoComplete..ctor()","ExceptionType":"System.NullReferenceException"}
can you plz help me out
I successfully implemented from SQL SERVER, but while using MYSQL Database i cant get value from database.So please help me to implement auto complete textbox from MYSQL Database.
Note: Only a member of this blog may post a comment.