Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AutoComplete Extender - Scroll bar causes results to close?

I have had a website running using a textbox, autocomplete extender, and autocompletedropdownpanel. Basically when a user starts typing a name into the text box the results appear in a few seconds. Since there can be hundreds of rows I need a scroll bar. Then the use just selects the name. For some reason, it is now broken (maybe update with IE? as it works fine in Chrome) Now when a user uses the scroll bar it automatically closes the results and is unable to make a selection. I have not been able to find a solution on the web for this. Is there an updated ajax kit I need to use? If so how do I go about replacing it? Or is there something to my code I can add or change?

Update: I found that this issue only appears on Surface Pro tablets. So something with IE11 and being a tablet causes this. Even though the tablet is docked with a normal keyboard and mouse.

Is it possible to use a cancelBubble function for a dropdownpanel with scroll bars? I have an issue where when clicking on the scroll bar to scroll threw rows once the mouse is released the results close. From reading I think I need some sort of cancelBubble event or stop propagation

  <asp:Panel ID="autocompleteDropDownPanel" runat="server" 
            ScrollBars="Auto" Height="200px" Font-Size="Medium" 
            HorizontalAlign="Left" Wrap="False" />

 <asp:AutoCompleteExtender ID="AutoCompleteExtender" runat="server" 
        DelimiterCharacters="" Enabled="True" ServicePath="AutoComplete.asmx" 
                ServiceMethod="GetCompletionList" TargetControlID="DoctorNameTextBox" 
                UseContextKey="true" ContextKey="StateDropDown"
                CompletionListElementID="autocompleteDropDownPanel" 
                onclientitemselected="getSelected"
                ShowOnlyCurrentWordInCompletionListItem="True" CompletionInterval="100" 
                MinimumPrefixLength="2">

    </asp:AutoCompleteExtender>
like image 949
user1342164 Avatar asked Nov 15 '16 20:11

user1342164


1 Answers

Just edit the css of the class.

Overflow: Auto;
Height: 60px;

If this doesnt work , then try following: Set AutoPostBack=false. If the AutoCompleteExtender functionality is gone by setting AutoPostBack=false , then by Using the OnClientItemSelected property I could call a javascript function that triggered a postback.

like image 183
Vishrut Shah Avatar answered Oct 31 '22 20:10

Vishrut Shah