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

Question

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

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

我希望列表显示在输入

下面

Answer 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