如何在数据列表下拉列表中提供滚动效果？

Posted 2023-02-19

【中文标题】如何在数据列表下拉列表中提供滚动效果？

【英文标题】：How to give scrolling effect in datalist dropdown?

【发布时间】：2017-09-15 10:42:14

【问题描述】：

我正在使用 html 数据列表来显示各种职业道路，但我的选项数量太长。我希望给它一个滚动效果。我已经搜索过它，但我发现只有 CSS 不能应用于 datalist。是否可以使用 jQuery 在 datalist 上应用样式？

这是我的 HTML 标记：

<input class="form-control searchbar" #input (input)="filterdata(input.value)" [(ngModel)]="homesearch" id="home_ssearch" name="careerr" list="careers" placeholder="Discover more about any career you like" />
<div>
        <datalist class="datalist" id="careers" >
          <option *ngFor = "let career of carrerpathList" value="career.title" ></option>         
        </datalist>
</div>

【参考方案1】：

试试这个

.scrollable 
  overflow-y: auto !important;  // Use !important only if there is already an overflow style rule for this element and you want to override

然后像这样应用它：

<datalist class="datalist scrollable" id="careers" >
     <option *ngFor = "let career of carrerpathList" value="career.title" ></option>         
</datalist>

希望对您有所帮助！ ;)

更新 1：

我讨厌内联样式，但让我们试试看<datalist> 是否接受样式。试试这个：

<datalist class="datalist scrollable" id="careers" style="overflow-y: auto!important">

【讨论】：

@UtkarshGautam 我更新了。让我们尝试一下，看看效果如何。让我知道它是否有这种风格。

@UtkarshGautam 检查元素，看看它是否接受样式。也许如果样式被接受，我们只需要更改 CSS 规则

.datalist 显示：无 ;这就是它所显示的。

我无法右键单击下拉菜单并从 Elements 手动检查我试图找出它有什么 CSS。

当它最终出现时（显示对吗？）右键单击它并选择 Inspect 选项。 Chrome 和 Firefox 是我检查 DOM 元素的最爱。

【参考方案2】：

这个简单的方法对我有用：

datalist 
    max-height: 500px;
    overflow-y: auto;

注意：此 CSS 会将滚动效果应用于所有 <datalist>

【参考方案3】：

一般来说，你不能。此元素是“替换元素”的示例，这些元素与操作系统相关，不属于 HTML/浏览器。它不能通过 CSS 设置样式。

相反，您可以使用引导下拉菜单或任何其他插件。

我已经使用了引导程序，您可以相应地调整高度，例如，

.dropdown-menu 
  max-height: 150px;
  overflow-y: auto;

jsfiddle link

【讨论】：

这个问题是，它不可搜索。如果这有一百个值，用户必须滚动并逐个查找值

您需要做一些额外的工作才能使引导下拉菜单可搜索。

我刚刚使用了 HTML datalist，问题是稍后在配置文件中编辑详细信息时，具有列表属性的输入没有填充从服务器发送的数据。其余字段正在填充。

查看这两个链接。 gomakethings.com/…gomakethings.com/…

【参考方案4】：

试试这个：

.datalist 
   height:50px !important;
   max-height:80px !important;
   overflow-y:auto;
   display:block !important;

【讨论】：

看起来好像最初在下拉加载时它会占用高度，但随后会溢出。

数据列表的初始高度为 80px。如果选项太长，将启用滚动。

我尝试给出的任何 CSS 都不例外。

更改类名。可能是命名冲突，添加 display:block !important 到它

我尝试更改类名，但它不起作用。我们可以使用 jquery 来设置样式吗？我想这会起作用