AutoComplete Extender - Scroll bar causes results to close? RRS feed

  • Question

  • User-1782670433 posted


    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? TIA

          <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"
                    ShowOnlyCurrentWordInCompletionListItem="True" CompletionInterval="100" 

    Tuesday, November 15, 2016 7:39 PM

All replies

  • User-1838255255 posted

    Hi Mkozlowski,

    According to your description, I test your code, as far as I know, when you enter char in textbox, observe cursor, it still stop in textbox, but when you click scrollbar, cursor disappear, so autocomplete event lose efficacy, then result in panel disappear! I make this function use jQuery autocomplete event, you can refer to this sample, I suppose have get data from code behind, also you can use jQuery Ajax to send request and get data.

    About how to use Ajax you can refer to this link:

    jQuery Ajax:


        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Autocomplete</title>
    	.ui-autocomplete {
    		max-height: 100px;
    		overflow-y: auto;
    		/* prevent horizontal scrollbar */
    		overflow-x: hidden;
    	/* IE 6 doesn't support max-height
    	 * we use height instead, but this forces the menu to always be this tall
    	* html .ui-autocomplete {
    		height: 100px;
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            $(function () {
                var availableTags = [
                    source: availableTags,
        <div class="ui-widget">
            <label for="tags">Tags: </label>
            <input id="tags">
        <ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: none;"></ul>
        <div role="status" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>


     Best Regards,

    Eric Du

    Thursday, November 17, 2016 8:34 AM