做一个Ionic的ComboBox-CSDN博客

本文链接：https://blog.csdn.net/chelen_jak/article/details/83010331

本文介绍如何在Ionic框架中使用HTML5的input和datalist标签实现下拉框输入过滤功能，解决了Input在ion-item中不生效的问题，并通过添加和移除类来控制焦点状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考资料：随笔记录（一） ionic里集成H5下拉框输入过滤
一、材料：
利用Html5的: input + datalist 标签

二、html

<div #pointNoItem class="item item-block item-md item-input" >
    <div class="item-inner">
        <div class="input-wrapper">
                <ion-label>监控点</ion-label>
                <input [(ngModel)]="pointNo" type="text" list="ide" class="text-input text-input-md" (blur)="blurInput()" (focus)="focusInput()"/>
                <datalist id="ide">
                    <option *ngFor="let item of pointList" value="{{item.PointNo}}">
                            {{item.PointNo}}
                    </option>
                </datalist>
        </div>
    </div>
    <div class="button-effect"></div>
</div>

想用这样做
<ion-item>
<ion-label>监控点</ion-label>
<input [(ngModel)]="pointNo" type="text" />
....

</ion-item>
发现Input 在 ion-item中不生效，最终用上面的方法，用div包起来

三、TS / JS

// 获取组件元素(Html的#pointNoItem)的实例引用
@ViewChild('pointNoItem') pointNoItemRef: any;

// 失去焦点 (移除类）
private blurInput() {
    this.pointNoItemRef.nativeElement.classList.remove("input-has-focus", "item-input-has-focus");
}

// 获得焦点 (添加类）
private focusInput() {
        this.pointNoItemRef.nativeElement.classList.add("input-has-focus", "item-input-has-focus");         
}

四、效果