利用中继器实现输入框动态提示功能 获赏10金币 基础教程

lsyjohn 普通用户 2020-2-3 1302

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

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

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

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

3、单击中继器,在右边的样式一栏可以看到中继器自身带有一个类似excel的数据表,表中的每一行数据对应中显示出来的行信息,比如默认的数据表中有3行,显示的中继器也有3行数据,双击进入中继器,可以看到里面有一个矩形框,而中继器本身有一个交互事件,名字叫“每项加载时”,操作为设置矩形的文本为Item.Column0。其中Item指代的就是中继器,而Column0就是其中的一个数据列。不难看出,就是在中继器中每一项内容加载的时候,将其中的矩形框的值设置为中继器中Column0中的值。比如我们再加了一列Column1,并在中继器中添加一个矩形框1,我们同样可以再增加一条语句将矩形框1的值设置为Column1。

4、调整中继器中的矩形框,使其和编辑框一样长,去掉矩形框的四边,设置背景色,并设置鼠标悬停时的颜色。

5、现在我们要中继器中显示的是提示内容,因此在其数据表中直接输入预定义的各种提示内容,比如下图中,我们输入了一些地名。


6、预览效果如下图,中继器中内容一直显示,我们要在编辑框内容发生变化时动态显示筛选后的中继器内容,因此首先我们将中继器设置为隐藏。

7、然后为编辑框添加交互事件,第一个事件是编辑框中文本改变时,对中继器中的内容进行筛选,它有一个筛选规则,这个筛选规则会应用于中继器的每一行数据,如果表达式的结果为真,则该行数据保留,为假则剔除改行数据。我们的筛选规则是如果改行数据包含编辑框中的数据,则显示。因此首先插入一个局部变量LVAR1,它的值就是编辑框中的文字,也就是“当前”。中继器中每一行的数据是Item.Column0,判断LVAR1是否在Item.Column0中需要用到字符串函数indexOf。


8、插入函数indexOf,函数式为[[LVAR.indexOf('searchValue')]],我们把LVAR替换为Item.Column0,'searchValue'替换为LVAR1,函数返回值大于等于0,则表示Item.Column0中包含有LVAR1。最终的表达式为[[Item.Column0.indexOf(LVAR1)>=0]]。

9、接着为“文本改变时”再加一个动作,显示中继器。

通过以上步奏,基本已经实现所需功能。下面再进行完善:

1、当鼠标点击中继器提示的信息时,自动将信息填入编辑框中。只需为中继器中的矩形框添加一个单击时事件,设置矩形框文本,同时隐藏中继器。

2、当编辑框获得焦点的时候,也进行一个筛选提示的操作,直接将”文本改变时“的动作复制过来即可。

3、当编辑框失去焦点的时候,隐藏中继器,300ms后才进行隐藏操作。这是为了保证上面1中点击中继器中提示内容时可以将信息自动填入编辑框。

下面就是2和3的效果。

https://www.axureshop.com/shop/24308中有一些综合实战案例,欢迎大家下载交流学习。

axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (20)
  • dz9166 普通用户 25天前
    0 引用 21
    谢谢
  • qzl123 普通用户 26天前
    0 引用 20
    感谢分享
  • 溪风丨微雨轻尘 普通用户 26天前
    0 引用 19
    感谢分享
  • 一路向南 普通用户 4月前
    0 引用 18
    6666
  • 16534087769 普通用户 5月前
    0 引用 17
    谢谢
  • Dwan. 普通用户 8月前
    0 引用 16
    1
  • 暖暖_1594784296 普通用户 8月前
    0 引用 15
    感谢分享
  • meihao 普通用户 8月前
    0 引用 14
    感谢分享!! 
  • 鹿野野 普通用户 10月前
    0 引用 13
    感谢分享!!
  • 爱看星星的周宇宙 普通用户 11月前
    0 引用 12
    666666
  • 老山贼Klau$ 普通用户 2020-4-10
    0 引用 11
    感谢分享,已获得10金币奖励!
  • 单单 普通用户 2020-3-20
    0 引用 10
    谢谢
  • 笨笨狐 普通用户 2020-3-14
    0 引用 9
    感谢分享
  • 程维维 普通用户 2020-3-11
    0 引用 8
    看看
  • 真以航(熊岳南京) 普通用户 2020-3-10
    0 引用 7
    感谢分享
  • 小杰_1582616374 普通用户 2020-2-25
    0 引用 6
    感谢
  • 燕小乙丶 普通用户 2020-2-18
    0 引用 5
    看看
  • Karen321 普通用户 2020-2-13
    0 引用 4
    谢谢
  • szuzsq 普通用户 2020-2-4
    0 引用 3
    ok
  • 沈十三 管理员 2020-2-4
    0 引用 2
    感谢分享,已获得10金币奖励!
返回
axure商城