AutoComplete in ASP.NET using Ajax

Introduction:

AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup DropDown like list of words that begin with the prefix typed into the textbox.

Create a new website using ASP.NET Ajax-Enabled Web Site:
Now drag and drop three controls on page. ScriptManager, Textbox, AutoCompleteExtender.

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1″%>

<form id=”form1″ runat=”server”>

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />

<div>

<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>

<cc1:AutoCompleteExtender ID=”AutoCompleteExtender1″

runat=”server”

ServicePath=”WebService.asmx”

ServiceMethod=”FindName”

MinimumPrefixLength=”1″

TargetControlID=”TextBox1″>

</cc1:AutoCompleteExtender>

</div>

</form>

Now add a new WebService class:
Here is web service code.

Imports System

Imports System.Collections.Generic

Imports System.Web

Imports System.Web.Services

Imports System.Web.Services.Protocols

Imports System.Data.SqlClient

Imports System.Data

Imports System.Data.Common

Imports AtlasTextBoxAutoComplete.DL

Imports System.Collections

<WebService(Namespace:=”http://tempuri.org/&#8221;)> _

<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _

<System.Web.Script.Services.ScriptService()> _

<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _

Public Class WebService

Inherits System.Web.Services.WebService

<WebMethod()> _

<System.Web.Script.Services.ScriptMethod()> _

Public Function FindName(ByVal prefixText As String, ByVal count As Integer) As String()

‘return all records whose Title starts with the prefix input string

Dim titleArList As New List(Of String)()

Dim drProducts As SqlDataReader = sqlProductProvider.GetNameList(prefixText)

While drProducts.Read()

Dim strTemp As String = Convert.ToString(drProducts(“Name”))

titleArList.Add(strTemp)

End While

Return titleArList.ToArray()

End Function

End Class

Result will look like this:


I am adding two classes in App_Code folder for database connectivity. You shoudl change your web.config key for database connection string. I am attaching my database in App_Code folder.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s