MaterializeCSS 自动完成向上答案

【问题标题】：MaterializeCSS Autocomplete going upwardMaterializeCSS 自动完成向上
【发布时间】：2019-12-09 16:49:28
【问题描述】：

Materialize CSS 自动完成功能在屏幕下端向上打开，并且它有一个更大的列表要显示，问题是带有闪烁光标的文本输入区域被覆盖并且用户没有得到他可以打字的想法。

1) 你怎么能强迫它总是向下？或者，2）当它决定向上打开时，如何告诉它在输入区域上方打开而不覆盖它？这些解决方案中的乙醚都可以。

我找到的最接近的解决方案是here（用于下拉菜单）和here，但是这些解决方案在我看来就像我（还）不熟悉的 jQuery 并且需要一个普通的 JavaScript 解决方案。

我通过 CDN 使用 MaterializeCSS 版本 1.0.0。

【问题讨论】：

【解决方案1】：

您好，自动完成正在向上，因为下面没有空间，但使用可以试试这个代码

<style>

        #autocomplete-options-509040f2-ba4c-72d4-413d-2e375f5c25f8
        {
             position: initial;

        }
      </style>

或者你可以在点击自动完成时添加jquery来添加父div的高度

$("#idofautocomplte").on("click", function () {
        $("#parentDivId").css("height", "400px"); 
    });

【讨论】：

CSS 解决方案对我不起作用，ID 始终是autocomplete-options-509040f2-ba4c-72d4-413d-2e375f5c25f8 还是动态生成的？
它基于您的 sn-p，您必须检查原始代码，以便您可以使用 id 或 class 它的逻辑，这样您就可以解决您的问题
jquery 对我来说不是一个选项，我不熟悉它。（我还假设 jquery 会在加载时向页面添加更多资源，无论如何我都不想这样做）
new Link 我尝试在课堂上这样做。我做错了什么？
我明白@SalunkeAkash 的建议。在您的.css 文件中尝试.autocomplete-content { position: initial; }。它会使下拉菜单“向上”推动屏幕，以便在您键入时可见。当所有选项都显示时，它看起来呈现“向上”，但在您键入时呈现“向下”。

【解决方案2】：

尝试使用这种风格：

    .autocomplete-content{
    top: 46px !important;
    max-height: 300px !important;
}

这会使自动完成始终向下对我来说它工作得很好

【讨论】：