asp.netvb.netautocompleteextender

Asp.net Autocomplete Extender Drop Down closing if too many results


I am using an autocomplete extender on my asp.net webpage to fetch data when a user starts typing a last name. Only when it seems there are a ton of results being returned, it never lets the user select an item from the drop down. It searches for a last name by state so if a user types in a 2 letter last name such as "Li" there could be many results returned from this. Is there a way to allow more results without it auto-closing?

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

</asp:AutoCompleteExtender>

Solution

  • We have gone through same situation like this , i can provide you with the 2 solutions

    Solution 1: try to Add the Css for the Extender in such a way that it scrolls , you can achieve this by applying something like as follows:

    .mycustom {
     Overflow: auto; 
      height: 100px;
     }
    

    Solution 2 : you can set the you could set the CompletionSetCount property of this control, it will show the less count items in dropdownlist. Default is 10 . but there is a downside for this solution there are chances that user may not able to find his desired result in it or he wants to explore more other options . for this what you can do is :

    try to keep another button such as More and triggering that button you can get another set of results.

    here is the sample how to trigger the auto extender from the button

    <asp:Button ID="yourtriggerbutton" runat="server" Text="Get Next Set of 
    Results" OnClientClick="javascript:displayautocomplete()"/>   
    

    Here is your trigger function

    <script type="text/javascript">
        function displayautocomplete() {
            var autoComplete = $find("AutoCompleteExtender");
            autoComplete.get_element().focus();
            autoComplete._textBoxHasFocus = true;
            autoComplete.get_element().value =" ";
            Sys.Net.WebServiceProxy.invoke(autoComplete.get_servicePath(),
               autoComplete.get_serviceMethod(),
               false,
               { prefixText: " ", count: autoComplete._completionSetCount },
               Function.createDelegate(autoComplete, autoComplete._onMethodComplete),
               Function.createDelegate(autoComplete, autoComplete._onMethodFailed),
               ”,
               5000);
    
            $common.updateFormToRefreshATDeviceBuffer();
        }
    </script>
    

    First you need to find the extender. Then set focus on the extender. Without setting the focus on the extender nothing will work. After the focus setting, you need to use the Sys.Net.WebServiceProxy.invoke method which will invoke the auto complete. The last thing to do is to use the $common.updateFormToRefreshATDeviceBuffer method which is registered by the AutoCompleteExtender in order to make updates to form elements and to refresh their document buffer to what is showing live in the browser.

    You can read more about this solution from here ,