如何在输入字段下显示列表项？答案

【问题标题】：How to show a list items under an input field?如何在输入字段下显示列表项？
【发布时间】：2018-02-25 12:33:33
【问题描述】：

我有一个输入字段作为搜索栏，当我输入内容时，它会过滤一些数据并将其显示在列表项中。但它没有显示输入下方的确切内容，而是在顶部显示了其中的一部分。我该如何解决？

<input type="text" placeholder="{{'home.Search' | translate}}" autofocus="true" required (keyup)="sendMessage($event)" class="font">
        <ul class="list" *ngIf="text" >
          <li *ngFor="let item of rows">
            {{item.title}}
          </li>
        </ul>

我希望列表显示在输入下方

【问题讨论】：

你能提供一个关于你迄今为止编写的 CSS 的工作小提琴吗？
@Alessio 我添加了两张图片，我应该提到我没有添加任何 css，我需要帮助来添加一些 css 代码

标签： html css listitem

【解决方案1】：

看看<datalist>html5。

例子：

<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

【讨论】：

我如何将它与 *ngFor 一起使用来显示数组项？以及如何为每个项目实现点击事件？
我猜你正在制作一个网络应用程序，也许是 angularJS，我对此一无所知，所以我只能提供帮助。另请注意，<datalist> 对于提出简单的输入下拉建议很有用。如果您需要更高级的东西，那么它可能不适合您。
你知道如何通过点击数据列表项来归档函数吗？
单击数据列表项将自动将其带到输入字段。如果是javascript，我会试试这个：像这样<option value="Chrome" id="selectchrome">在我的js文件document.getElementById("selectchrome").addEventListener("click",...);中添加一个id到<option>。或者这可能会有所帮助stackoverflow.com/questions/30022728/…