Question

有关离子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

将ion-input更改为input list，就可以完成

工作示例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>

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

1 个答案: