Predictive DropDownList using the AJAX AutoCompleteExtender

A client wanted a cool, predictive dropdownlist. So I decided to give the AJAX AutoCompleteExtender a go. It was really easy to use, didn’t have to write a lot of code and works a treat…what else could I ask for?

To use it all i did was:

1. Put the control on the page and point it at a text box.


<cc1:AutoCompleteExtender ID="agencyAutoComplete" runat="server" 
TargetControlID="txtAgency" MinimumPrefixLength="1" ServicePath="SoulSolutionsService.asmx" 
ServiceMethod="GetAgencyNameCompletion" DelimiterCharacters="" Enabled="True" 
OnClientItemSelected="agencySelectedHandler"></cc1:AutoCompleteExtender>
<asp:TextBox ID="txtAgency" runat="server"></asp:TextBox>

2. Write a webservice to retrieve matching entries as the user types


Imports System.Web.Services

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<System.Web.Script.Services.ScriptService()> _
Public Class SoulSolutionsService
    Inherits System.Web.Services.WebService

    <System.Web.Script.Services.ScriptMethod()> <WebMethod()> _
    Public Function GetAgencyNameCompletion(ByVal prefixText As String, ByVal count As Integer) As String()
        Return AgencyBusinessLogic.GetAgencyNameCompletion(prefixText, count).ToArray()
    End Function

    <System.Web.Script.Services.ScriptMethod()> <WebMethod()> _
    Public Function GetAgencyByName(ByVal agencyName As String) As AgencyDetailsEntity
        Return AgencyBusinessLogic.GetAgencyByName(agencyName)
    End Function

End Class

3. I wanted to fill out some additional details based on the users selection, so i just added some javascript to handel the selection.


function agencySelectedHandler(source, eventArgs)
{
    SoulSolutionsService.GetAgencyByName(eventArgs.get_text(), OnLookupComplete, OnError, source);
}

function OnLookupComplete(result, source)
{
    if <%=agencyAutoComplete.ClientID%> == source.get_id())
    {
        CopyToFundingAgency(result);
    }
    else
    {
        CopyToDeliveryAgency(result);
    }
}

function OnLookupComplete(result, source)
{
    if <%=agencyAutoComplete.ClientID%> == source.get_id())
    {
        CopyToFundingAgency(result);
    }
    else
    {
        CopyToDeliveryAgency(result);
    }
}

function OnError(result)
{
    alert("Error: " + result.get_message());
}

function CopyToFundingAgency(result)
{}

function CopyToDeliveryAgency(result)
{}