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

  • Question

  • User-1782670433 posted

    Hi,

    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"
                    CompletionListElementID="autocompleteDropDownPanel" 
                    onclientitemselected="getSelected"
                    ShowOnlyCurrentWordInCompletionListItem="True" CompletionInterval="100" 
                    MinimumPrefixLength="2">
    
        </asp:AutoCompleteExtender>

    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:

    http://www.w3schools.com/jquery/ajax_ajax.asp

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Autocomplete</title>
        <style>
            
    	.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;
    	}
    	
        </style>
        <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>
        <script>
            $(function () {
                var availableTags = [
                  "ActionScript",
                  "AppleScript",
                  "Asp",
                  "BASIC",
                  "C",
                  "C++",
                  "Clojure",
                  "COBOL",
                  "ColdFusion",
                  "Erlang",
                  "Fortran",
                  "Groovy",
                  "Haskell",
                  "Java",
                  "JavaScript",
                  "Lisp",
                  "Perl",
                  "PHP",
                  "Python",
                  "Ruby",
                  "Scala",
                  "Scheme"
                ];
                $("#tags").autocomplete({
                    source: availableTags,
                });
            });
        </script>
    </head>
    <body>
        <div class="ui-widget">
            <label for="tags">Tags: </label>
            <input id="tags">
        </div>
        <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>
    </body>

    Result:


     Best Regards,

    Eric Du

    Thursday, November 17, 2016 8:34 AM