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” %>
<META http-equiv="Page-Enter" content="blendTrans(Duration=2)">
<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>
//////////////////////////////////////////////////////////////////////////////////////////////////////////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.
