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

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