Add Scroll Bar in ASP Net Core MVC Auto Complete component

Question

I'm developing a project in ASP NET Core MVC, where I have a text field that has an autocomplete fed by a list.

But when I start typing in the field, and the search is too big, the suggestion component gets huge.

How do I reduce this auto complete, or even if possible include a Scroll Bar in the result.

Form Image

CSHTML

site.js

I have already sought various supports or help to solve the problem, but so far without success.

Please refer to the following question to see if this helps with your problem: https://stackoverflow.com/questions/7617373/limit-results-in-jquery-ui-autocomplete — Shiin Zu, Feb 06 '23 at 18:42
Please post your code as code, [not as an image](https://meta.stackoverflow.com/questions/285551/why-should-i-not-upload-images-of-code-data-errors). — FiddlingAway, Feb 06 '23 at 22:29
Hi @Leonardo Silva, welcome to Stackoverflow. It is better for you to share the code instead of image. Any way I share the solution below. Weather it helps you or not, pls let me know. Thank you. — Rena, Feb 08 '23 at 08:57

score 1 · Answer 1 · answered Feb 08 '23 at 07:33

Load the jquery.ui.autocomplete.scroll.min.js script file after loading jquery-ui.js etc.
The maxShowItems is added to Autocomplete options. It accepts the number of items which is max height of items list.

Here is a whole working demo you could follow:

<input type="text" id="municipionNome" asp-for="NomeMunicicipio" class="form-control" />

@section Scripts{
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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 src="https://cdn.jsdelivr.net/npm/jquery-ui.autocomplete.scroll@0.1.9/jquery.ui.autocomplete.scroll.min.js
"></script>
    <script>
        $(function () {     
            $("#municipionNome").autocomplete({
                source: ..... 
                maxShowItems: 3,
            });
        });
    </script>
}

Result:

Add Scroll Bar in ASP Net Core MVC Auto Complete component

1 Answers1