layui动态添加输入框_利用中继器实现输入框动态提示功能

本文介绍如何使用layui的中继器实现输入框内容变化时动态筛选提示功能。通过设置文本框和中继器,利用中继器的每项加载时事件及indexOf函数,实现动态筛选和提示信息的显示与隐藏。此外,还涵盖了点击提示信息填充编辑框,以及编辑框获取和失去焦点时的交互处理。
摘要由CSDN通过智能技术生成

本文介绍一下用中继器实现输入框内容动态提示的具体方法,最终实现的效果如下:

13fd26582b8dbf9d8fd143ed8a66c13d.gif

从动图中可以看出,基本组成元素包括输入框和一个中继器,在输入框中内容发生变化的时候,对中继器内容进行动态筛选,并在编辑框下面显示筛选结果。具体步奏如下所示:

1、首先在界面中拖入一个文本框,可以自行设置输入框的样式;

6ec22036f06894e88017d9a939868914.png

2、在编辑框下部拖入一个中继器,中继器默认显示了三项内容;

738392ac167257bea87e4df0cf74afdf.png

3、单击中继器,在右边的样式一栏可以看到中继器自身带有一个类似excel的数据表,表中的每一行数据对应中显示出来的行信息,比如默认的数据表中有3行,显示的中继器也有3行数据,双击进入中

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值