Vanishing scroll bar when using Autocomplete extender

Question

Hi

I use the Autocomplete extender feature to get the list of suggestions from my database. There is no scroll bar for this control, so I have added a scroll bar in a panel (MS .net 2.0) which i attach to my autocomplete extender.Now the issue is with the srcoll bar. like this

<asp:Panel ID="autocompleteDropDownPanel" runat="server"  ScrollBars="Auto"  Height="100px" HorizontalAlign="Left" />

and add it to autocompete extender like this

:CompletionListElementID="autocompleteDropDownPanel"

When I call my page, I get the list of suggestions and the scroll bar appears. When I click on scroll bar or try to drag, everything just disappears.

Am i doing something wrong? Is there any other way to add a scroll bar to my autocomplete extender control

Any hints would be very helpful.

Answer 1

This does not directly answer your question - but I would ask if you're sure that the autocomplete extender is the best control to be using in this scenario.

From a usability perspective the great thing about autocomplete is that I can type a 3-4 characters, see a few available inputs and easily select them using the keyboard using a few down-cursor keypresses.

If you are displaying more items in the autocomplete list than can be easily viewed on screen then I'm not sure that the fix is to add a scrollbar.

In our scenario we had a list of 2800 names that were available in the autocomplete. We limited the number shown to 20, but set the MinimumPrefixLength to 1. This meant that when the user typed one character they would see an autocomplete list that effectively just lets them know that the textbox they're typing in has this ability. The list of results in the list only becomes really useful once the user has entered 3-4 characters though.

Answer 2

I have a similar issue looks like it has not been resolved.

Clicking the AutoCompleteExtender scrollbar causes postback when attached to a TextBox where AutoPostBack="true".

Steps to reproduce:

1. Add a TextBox to your ASPX page with AutoPostBack="true".
2. Add an AutoCompleteExtender and specify the TextBox above as the target control.
3. Create a new web service method and specify the appropriate ServicePath and ServiceMethod on your AutoCompleteExtender.
4. Specify all the appropriate attributes on your AutoCompleteExtender as needed so that typing some text displays a drop down.
5. From the web service method, make sure you will be returning a large number of items, so that the AutoCompleteExtender's drop down list displays a scrollbar.
6. Click or tab into the TextBox and type some text so that the drop down (with scroll bar) is displayed.
7. For good measure, first try simply pressing the arrow down key until the drop down starts scrolling on its own. This works fine, no problem.
8. Now, instead of arrowing down, click the scrollbar and begin scrolling.
9. Doh! All of a sudden, it appears that the focus is lost from the TextBox control, which naturally causes the AutoPostBack behavior to kick in. This causes the drop down to disappear and you are never able to scroll in the manner in which you intended.

It seems like what we need is a way of temporarily disabling the AutoPostBack behavior whenever the drop down is displayed or perhaps just when a person tries to scroll. Maybe clicking down on the scrollbar could set some sort of flag that would disable the AutoPostback, and then releasing the mouse would re-enable it. I don't know how feasible this is, but it sure would be nice if someone had an idea.

http://www.codeplex.com/AjaxControlToolkit/WorkItem/View.aspx?WorkItemId=15161

Answer 3

well this is solved right now in visual studio 2008 sp1 ajaxtoolkit and you can provaid scrolling to list but editing the css of CompletionListCssClass set

overflow:auto;
height:60px;

Answer 4

merci fonctionnel pour le scroll bar

Answer 5

I just encountered the same symptoms when using the AutoCompleteExtender in ASP.NET 3.5.....this was because I had AutoPostBack=True on the textbox, turning this off made the scroll bar function properly.

(I know this isn't the same scenario as the original question but I found this from google while trying to fix my problem so it seemed appropriate to post my solution.)

Cheers Jon