jquery 在ASP Net Core MVC自动完成组件中添加滚动条

bgtovc5b  于 2023-02-12  发布在  jQuery
关注(0)|答案(1)|浏览(104)

我正在用ASPNETCoreMVC开发一个项目,其中我有一个文本字段,它有一个由列表提供的自动完成功能。
但是当我开始在字段中输入时,搜索太大,建议组件就会变得巨大。
我如何减少这种自动完成,甚至如果可能的话,包括一个滚动条的结果。
Form Image
CSHTML
site.js
我曾寻求各种支援或帮助,以解决问题,但至今仍无结果。

sczxawaw

sczxawaw1#

  • 在加载jquery-ui.js等之后加载jquery.ui.autocomplete.scroll.min.js脚本文件。
  • maxShowItems被添加到自动完成选项。它接受项目列表的最大高度的项目数。

下面是一个完整的工作演示,你可以跟随:

<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>
}

结果:

相关问题