Auto Suggestion Search TextBox in MasterPage using JQuery & WebServices in Asp.Net C#, VB.NET

By: Suresh Dasari Aug 30, 2015

Introduction:

Here I will explain how to implement auto suggestion search textbox in masterpage using jQuery using web service example in asp.net using c#, vb.net or bind or fill a jQuery autocomplete search 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.

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

<title>jquery autocomplete textbox example with master page in asp.net</title>

<asp:ContentPlaceHolder id="head" runat="server">

$(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>

Master Page

<label for="tbAuto">Enter UserName: </label>

</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 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