做一个Ionic的ComboBox

小咪咪 2022-05-08 10:50 99阅读 0赞

参考资料：[随笔记录（一） ionic里集成H5下拉框输入过滤][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");         
    }

四、效果  
![70][]

[ionic_H5]: https://blog.csdn.net/hacker0817/article/details/76861179
[70]: /images/20220508/a77ecbc9a9ad401d912b80dfc4874fa5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，99人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaFX ComboBox

The JavaFX ComboBox control enables users to choose an option from a predefined list of

女爷i/ 2023年10月14日 23:00/ 0 赞/ 133 阅读

相关做一个简单网页(做一个简单网页多少钱)

怎样做一个简易的网页？做一个简单网页多少钱做一个简易的普通网页比较容易。当然，制作的方法有好几种，有的是直接写代码、有的是用绘图软件绘制页面再导出网页、常用的是使用网页

谁践踏了优雅/ 2023年09月23日 18:38/ 0 赞/ 132 阅读

相关 ComboBox概述

The ComboBox class creates a control that allows the user to select an option from a dro

àì夳堔傛蜴生んèń/ 2022年12月06日 15:28/ 0 赞/ 134 阅读

相关 easyui combobox

<div id=id+"_type"></div><span style="white-space:pre"> </span> var data=[

雨点打透心脏的1/2处/ 2022年07月21日 08:56/ 0 赞/ 211 阅读

相关 easyui-combobox

在做功能的时候用到easyui的combobox，下拉框经常使用，因此把它的使用方法简单总结如下： html代码部分： <pre name="cod

梦里梦外;/ 2022年07月15日 13:19/ 0 赞/ 200 阅读

相关最近做的一个项目

给用户一个链接，输入密码和帐号进入系统，会显示一个页面，这个页面上的数据，是从mysql数据库里面定时取出的，所以看上去页面在时实变动，想请教一下大家

以你之姓@/ 2022年06月12日 05:10/ 0 赞/ 174 阅读

相关做一个Ionic的ComboBox

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

小咪咪/ 2022年05月08日 10:50/ 0 赞/ 100 阅读

相关 ionic3做本地缓存

1，现在相应的包 npm install @ionic/storage@2.0.0 2，在 src\\app\\app.module.ts 中引入并全局定义storag

缺乏、安全感/ 2022年04月18日 06:14/ 0 赞/ 219 阅读

相关 combobox总结

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xfZGVn

雨点打透心脏的1/2处/ 2021年09月28日 02:24/ 0 赞/ 271 阅读

相关做一个真正的程序员

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 想想自己写代码已有一年多了,有很多感触和想法,特意写下来

女爷i/ 2021年09月20日 02:38/ 0 赞/ 403 阅读