Welcome to TechNet Blogs Sign in | Join | Help

Cascading AutoComplete

We have received a lot of feedback from users about not being able to pass additional information to the AutoComplete webservice which limits their usage of the extender. We decided to absorb that input and add support to all extenders that issue XmlHttpRequests the option of passing in data above and beyond what is allowed by the standard webservice parameters, something that closely resembles the DynamicPopulate style support, to provide to flexible context. With this support in, you will be able to bind the AutoComplete extender to any controls on the page and have a richer, contextual and relevant set of results returned by the AutoComplete webservice. It will be available in the next release of the Toolkit around the end of May.

I played around with this new feature to see if something interesting could be done with AutoComplete. There was a question about getting AutoComplete to work like CascadingDropDown on the forums which I had earlier considered but dismissed given that it was not easily possible; turns out that the scenario now lights up naturally. I have written a basic version of CascadingAutoComplete and am attaching the project. I have not used ASP.NET DataBinding but simple javascript to set the values of the ContextKey so this solution should work without ASP.NET with little changes. It is not possible to have a fully functional CascadingDropDown with AutoComplete since it is a TextBox and not a DropDown but the input checks can provide a similar experience. You could always add validators or other Toolkit extenders like MaskedEdit, ValidatorCallout out FilteredTextBox to prevent invalid input. There are multiple ways of approaching this and you will need to find the solution that best serves your website's needs. The Toolkit now enables you do more with the extenders. The other controls that can take in additional data are SlideShow and CascadingDropDown itself.

The sample demonstrates a simple lookup scenario where the allowed values in the second textbox are tied to the value in the first one. The second textbox uses the text in the first one to perform a webservice call and retrieve results. Check it out. If you are a movie freak or if you like to read Hollywood gossip, there just might be something more than AJAX to look forward to in the sample. Let us know what you think. We are listening.

Published Thursday, May 17, 2007 12:52 AM by kirtid
Filed under: , ,

Attachment(s): CascadingAutoComplete.zip

Comments

Friday, May 18, 2007 11:35 AM by OurCurrentFuture

# re: Cascading AutoComplete

That's great news!  I had extended the functionality of the base AutoComplete to include passing another parameter so I could use it in this manner.  The pain being that whenever a new toolkit was released, I'd have to merge my changes back in again.

Sounds like your solution is a bit more elegant than mine.  Thanks for the work that you put in!

Saturday, June 09, 2007 1:33 PM by kirtid

# re: Cascading AutoComplete

With the new version of the Toolkit this workaround is no longer necessary the AutoComplete extender takes in a parameter called ContextKey to which you can pass any relevant data.

Tuesday, August 14, 2007 5:30 AM by Perhentian

# re: Cascading AutoComplete

Although ContextKey is available on the server side I'm having problems populating this on the client side.

I want an client side javascript onchange event on my first textbox to set the contextkey.  

Is this possible?

Thanks!

Tuesday, August 14, 2007 1:10 PM by kirtid

# re: Cascading AutoComplete

The attached zip file sample takes in the value selected in the first textbox and sets it to be the context key of the second textbox's autocomplete behavior. And this is all in script. Let me know if it works out fine.

       function initCascadingAutoComplete() {

           var moviesAutoComplete = $find('autoCompleteBehavior1');

           var actorsAutoComplete = $find('autoCompleteBehavior2');

           actorsAutoComplete.set_contextKey(moviesAutoComplete.get_element().value);

           moviesAutoComplete.add_itemSelected(cascade);

           // setup initial state of second flyout

           if (moviesAutoComplete.get_element().value) {

               actorsAutoComplete.get_element().disabled = false;

           } else {

               actorsAutoComplete.get_element().disabled = true;

               actorsAutoComplete.get_element().value = "";

           }

       }

       function cascade(sender, ev) {

           var actorsAutoComplete = $find('autoCompleteBehavior2');

           actorsAutoComplete.set_contextKey(ev.get_text());

           actorsAutoComplete.get_element().value = '';

           if (actorsAutoComplete.get_element().disabled) {

               actorsAutoComplete.get_element().disabled = false;

           }

       }  

       Sys.Application.add_load(initCascadingAutoComplete);

Wednesday, August 15, 2007 9:37 AM by InShadows

# re: Cascading AutoComplete

Thank you for the great example, kirtid.  

I am running into one slight problem with the JavaScript and the disabled second textbox and was wondering if you could help out.

I'm using your testsite without anycode changes.  If I type in Mystic River in the first text box and then use the Tab key, it goes to the submit button.  If I take the mouse back to the second autocomplete textbox, I can't.  It's still disabled.  I might be a small minority that uses the Tab key to proceed through a form but I was wondering if there was a way around it to still have it disabled if the first textbox does not have anything in it and yet be enabled if the user hits tab.  

Thanks in advance.

Wednesday, August 15, 2007 2:02 PM by kirtid

# re: Cascading AutoComplete

The motivation behind that is to make sure that the user gets to choose an actor only if they choose a valid movie from the list. In the javascript, the second textbox is enabled only when the first autocomplete extender fires an item selected event. This is not foolproof and the user can still attempt to enter invalid text in the first text box after selecting the item but for that I recommend adding custom validators. You could have "cascade" be called if the text in the first textbox changes to get your scenario working.

Wednesday, August 29, 2007 2:55 PM by Brian J. Cardiff

# re: Cascading AutoComplete

Check the next version of Web Client Software Factory (http://www.codeplex.com/websf). There is a Context Sensitive Autocomplete Extender Control with this funcionality.

Wednesday, January 02, 2008 1:18 PM by ASP.NET AJAX Toolkit Forum Posts

# AutocompleteExtender doesn't call webservice method after adding in the contextKey property

Hi all, My Ajax AutocompleteExtender works perfectly with the default 2 parameters back in web service

Saturday, March 15, 2008 11:15 AM by ASP.NET AJAX Toolkit Forum Posts

# autocomplete cascade

Like others, I have been trying to get the selection from the completionlist for one Textbox with AutoCompleteExtender

Thursday, July 17, 2008 5:12 AM by abumaroua

# re: Cascading AutoComplete

Hi Kirtid,

I tried the concept of cascading autocomplete text in on direction (first txtbox ---> second txtbox) it work well for me.

what I'm trying to do now is to have a bidirectonnel cascading autocomplete text  (first txtbox <---> second txtbox), I worked to find out a solution but in vain.

If you have any idea, or any one of the community,  it will be greatfull.

thanks, have a nice day.

Anonymous comments are disabled
 
Page view tracker