How to show possibilities in AutoCompleteExtender without user input | Division by Zero

Architecture, security and coding

How to show possibilities in AutoCompleteExtender without user input

How to show possibilities in AutoCompleteExtender without user input

Written by Division by Zero

Friday, 20 August 2010 11:17

The AjaxControlToolkit AutoCompleteExtender uses user input to show suggestions. Sometimes this is nog enough. It's not quite user friendly if an user doesn't know what to enter and has to guess something. As an alternative you can use a button to show some suggestions. Here's how to dot that.

You have an input field with an AutoCompleteExtender and add an button.

<asp:TextBox ID="tbSelectUser" CssClass="Textbox" runat="server" Width="146px" />
 <acc:AutoCompleteExtender ID="aceSelectUser" runat="server" TargetControlID="tbSelectUser" MinimumPrefixLength="1"
 ServicePath="~/Service/Users.asmx" ServiceMethod="GetUserNameSuggestions" EnableCaching="true" CompletionInterval="5"  />
 <input id="btnShowUsernames" type="button" class="Button" runat="server" />

With the following Javascript you are able to show suggestions without entering some text.

function showAutoComplete(elemName)
{
 showAutoComplete(elemName, false);
}

function showAutoComplete(elemName, enableContext)
{
 var autoComplete = $find(elemName);
 autoComplete.get_element().focus();
 autoComplete._textBoxHasFocus = true;
 autoComplete.get_element().value = '';

 if (enableContext)
 {
 Sys.Net.WebServiceProxy.invoke(autoComplete.get_servicePath(), autoComplete.get_serviceMethod(), false,
 { prefixText: '', count: autoComplete._completionSetCount, contextKey: autoComplete._contextKey },
 Function.createDelegate(autoComplete, autoComplete._onMethodComplete),
 Function.createDelegate(autoComplete, autoComplete._onMethodFailed),
 '',
 5000);
 }
 else
 {
 Sys.Net.WebServiceProxy.invoke(autoComplete.get_servicePath(), autoComplete.get_serviceMethod(), false,
 { prefixText: '', count: autoComplete._completionSetCount },
 Function.createDelegate(autoComplete, autoComplete._onMethodComplete),
 Function.createDelegate(autoComplete, autoComplete._onMethodFailed),
 '',
 5000);
 }

 $common.updateFormToRefreshATDeviceBuffer();
}

Now you just have to add the javascript to the button and you're ready to rock.

btnShowUsernames.Attributes["onclick"] = string.Format("showAutoComplete('{0}');", aceAcceptUser.ClientID);

Tags:

Related Articles

Add comment

Its name is Public Opinion. It is held in reverence. It settles everything. Some think it is the voice of God. - Mark Twain

© 2009 - 2012, Division by Zero

Template based on the empire template by joomlashack

This work by Division by Zero is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Netherlands License.