Ionic 4 - 来自数据列表的离子输入自动完成

Question

问题是关于 ionic 4 的。我正在尝试为离子输入提供一个淡水河谷列表。由于列表包含 200 个项目，我想过滤列表。是这样的： https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

我已经看到这个问题： https://github.com/ionic-team/ionic/issues/5702 但提案解决方案不适用于 Ionic 4:

<ion-input list="browsers" name="browser" placeholder="Choose category">
    <ion-label>Browsers</ion-label>
</ion-input>
<datalist id="browsers">
    <option value="Internet Explorer"/>
    <option value="Firefox"/>
    <option value="Chrome"/>
    <option value="Opera"/>
    <option value="Safari"/>
</datalist>

谢谢

Answer 1

Change ion-input to input list then you are done

工作示例stackblitz

 <ion-content>
 <input list="browsers"  placeholder="Choose category">
      <ion-label>Browsers</ion-label>

    <datalist id="browsers">
        <option value="Internet Explorer"></option>
        <option value="Firefox"></option>
        <option value="Chrome"></option>
        <option value="Opera"></option>
        <option value="Safari"></option>
    </datalist>

Ionic 4 - 来自数据列表的离子输入自动完成

Ionic 4 - ion-input autocomplete from datalist

html

autocomplete

ionic-framework

ionic4