Ajax 1.0 Autocomplete textbox asp.net 2.0

BluJag · Feb 9, 2007

9 Feb 07
ASP.NET version 2.0
AJAX.NET version 1.0 (as released a couple of weeks ago)
Visual Web Developer Express Edition (VWD)
Language VB.NET

Using the ajax autocomplete gizmo so you can have your text box show a drop down list like "Google suggest" do when you type in a search term.

Spent hours (and hours...) trawling the net trying to get the thing to work, and now I have I thought I'd share how I did it to save anyone else the trouble.

Create an ASP.Net Ajax Enabled Web Site from file menu of VWD

Create a bin diectory within the root of this web site. Inside it place
Microsoft.Web.Preview.dll and AjaxControlToolkit.dll You will have downloaded these from the AJAX : The Official Microsoft ASP.NET AJAX Site

on default.aspx page drag

1 a ScriptManager from the AJAX Extensions part of the VWD Toolbox
2 a text box - call it txtTest
3 a AutoCompleteExtender from the Ajax Control Kit part of the VWD Toolbox (note - if this section of the Toolbox is not there you need to copy and paste the AjaxControlToolkit.dll onto a new section of the Toolbox - this will create all the tools for you)

Go to the source view of default.aspx and make it so

//////////////////////////////////////////////////////////////////////////////////////////////////////////
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<META http-equiv="Page-Enter" content="blendTrans(Duration=2)">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Test Page</title>

</head>
<body>
<form id="Form1" runat=server>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>

<div ID="AutoComplete" runat="server" class="some css style you've defined"></div>

<asp:TextBox ID="txtTest" runat="server" CssClass="some css style you've defined" MaxLength="50"></asp:TextBox>

<cc1:autocompleteextender id="aceTest" Enabled=true TargetControlID="txtTest" ServiceMethod="GetData" runat="server" ServicePath="autocomplete.asmx" CompletionInterval="1" MinimumPrefixLength="1" CompletionListElementID="AutoComplete" CompletionSetCount="20" EnableCaching=true></cc1:autocompleteextender>

</form>

</body>
</html>
//////////////////////////////////////////////////////////////////////////////////////////////////////////

Now, from the file menu of VWD select New File and select Web Service and call it autocomplete.asmx Do not tick the Place code in separate file box

Open up autocomplete.asmx and make it so

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
<%@ WebService Language="VB" Class="autocomplete" %>

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data
Imports System.Data.SqlClient

<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://someurl.com/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
Public Class autocomplete
Inherits System.Web.Services.WebService

<WebMethod()> _
<System.Web.Script.Services.ScriptMethod()> _
Public Function GetData(ByVal prefixText As String, ByVal count As Integer) As String()

GetData = GetMembers(prefixText, count)

End Function

Private Function GetMembers(ByVal prefixText As String, ByVal count As Integer) As String()

' code to retrive list of members from SQL database
Dim SR As SqlDataReader
Dim DB As New Admin.Helpers 'class where stored proc is called to query database

Dim result(10000) As String
Dim members(10000) As String
Dim Co As String = ""

'What we want is a long string of members names, separated by a : so any method you use to achieve this will be fine. The string will end up lik e this Co="Abel:Jones:Kahn:Zak:"

SR = DB.GetMembers 'method in the Admin class

While SR.Read
Co = Co & SR("Members") & ":"
End While

SR.Close()

members = Co.Split(":")

Dim listOfMembers As String = String.Empty

'---find members being with the prefixText---

For Each member As String In members
If member.StartsWith(prefixText, StringComparison.OrdinalIgnoreCase) Then

'---add the member name to the list---

listOfmembers += member & vbLf
End If
Next

'---convert the members list into an array---

result = listOfmembers.Split(vbLf)

'---sort the array---

Array.Sort(result)

GetMembers = result

End Function

End Class
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

That should be it - give it a try - it's really neat! The members name ends up in txtTest from where you can then do further procesing etc.
In this example all the files (except the dll's in the bin dir) are in the root directory.

subil · Jul 13, 2007

i cant understand the helper class.if u can send me the complete code and db details it would be a gr8 help.thank u.[email protected]

SubSpace · Jul 14, 2007

The auto completion requires a webservice to supply it with data, which is what the helper class is.
That webservice requirement is quite annoying really

eliza81 · Jun 1, 2010

The solution is to add autocomplete="off" attribute to textbox tag, which will help to stop auto suggestion behaviour for that particular textbox.
And if you want to stop that behaviour for all the textboxes that are present inside a form then add autocomplete="off" attribute to form tag.

According to HTML specifications, autocomplete is an unrecognized attribute which was originally created by Microsoft (feature of remembering what you have entered in previous text fields with the same name, available first in Internet Explorer) and has adopted by all other major modern browsers (except Opera).

Log in

Ajax 1.0 Autocomplete textbox asp.net 2.0

BluJag Perch

subil Guest

SubSpace Bass

eliza81 Guppy

Share This Page

JodoHost - 26,000 hosting end-users in 100 countries

JodoInstitute - Thousands of IT professionals Trained

Log in

Ajax 1.0 Autocomplete textbox asp.net 2.0

BluJag Perch

subil Guest

SubSpace Bass

eliza81 Guppy

Share This Page

JodoHost - 26,000 hosting end-users in 100 countries

JodoInstitute - Thousands of IT professionals Trained

Useful Searches