vc 文本框只显示下划线_【Axure9百例】36.文本框搜索自动匹配

“ 根据输入的内容自动显示匹配内容列表。”

这是《Axure9百例》系列第36篇

在文本框搜索时，自动匹配搜索的内容，并以列表的形式显示在文本输入框的下方，选中一项后当前选中内容回填到文本输入框中。

—

界面布局

界面由一个文本输入框(名称search_text)和一个中继器元件(名称file_list)组成，中继器用来显示匹配结果数据，界面比较简单，主要是演示一下文本输入框的输入处理和中继器的筛选功能。界面如下：

1、文本框的提示文本内容设置为“搜索文档、正文内容、团队或用户名”，且在获得焦点时会自动清除提示内容。

2、中继器预设了5条数据，表示的是文件列表。

中继器的每一项同一个图标和一个矩形框组成，矩形框架添加了默认的阴影效果，这样让整体看起来会有个阴影。矩形框文本设置为左对齐，并且左边距设置为60，空出的位置用来放一个图标。

中继器的矩形框添加了交互模式，鼠标经过时和选中时的样式，只改变了下背景颜色，选中时的样式和它一样。

3、初始状态，将中继器file_list隐藏。

—

交互处理

通过处理文本输入框的文本改变时事件，触发中继器的筛选功能，满足条件的数据才会显示，这里主要处理的是文本框的“文本改变时事件”。

事件有两个情形，分别用来显示和隐藏中继器的。我们希望文本框内没有输入文字时就隐藏中继器列表，否则才会显示。

情形1：如果当前输入框的文字长度大于0，也就是说输入了内容，则

1、显示中继器列表

2、添加一个筛选器，条件是当前中继器的name字段内容中包括输入的文本，即表达式：[[Item.name.indexOf(LVAR1)>-1]]，其中局部变量LVAR1是文本输入框的内容。字符串函数indexOf用来检查当前文本中是否包括指定内容，如果包含了，结果就大于-1

情形2：否则的话，就隐藏中继器列表，并删除中继器的筛选条件

1、隐藏中继器file_list

2、移除筛选条件

下面处理列表选中内容回填到文本输入框。

给中继器中的矩形框添加单击事件，单击后将当前矩形框的文本内容设置到输入框中，并且隐藏中继器列表。

F5预览一下效果，输入关键字，例如“需求”、“宽带”、“docx”等等，然后选中列表中的某一项单击选中。

—

小结

输入框的自动匹配主要应用了文本输入框的文本改变时事件，通过设置中继器的筛选条件，匹配满足条件的数据。从匹配的结果列表里单击后，通过设置文本将当前选中项回填到输入框中，完成整个搜索匹配过程。

你，get到了吗？

往期回顾

【Axure9百例】35.透明元件和创意动画

【Axure9百例】34.动画效果应用 - 片头动画

【Axure9百例】33.网易云音乐 - 单选效果

【Axure9百例】32.网易云音乐 - 两级导航菜单滑动

【Axure9百例】31.网易云音乐 - 唱片机播放

产品原型设计是产品经理的基本技能，本系列是 Axure9 原型设计的基础知识普及，目标是通过一百个案例，从不同的使用场景来学习 Axure9 的应用。希望你能通过点赞、在看或转发，让行业内更多的人一起学习，共同提升我们的原型设计能力，提高我们的产品设计能力。

vc 文本框只显示下划线_【Axure9百例】36.文本框搜索自动匹配相关推荐

vc 文本框只显示下划线_Word手动添加下划线就out了？虚线、波浪线、双下划线一键搞定...
相信许多朋友在使用Word编辑文档内容的时候,经常会有涉及到对文本内容添加下划线的操作.有时候我们需要根据实际的情况去添加:单实线下划线.虚线下划线.双下划线.波浪线等等下划线条. 许多朋友在对文本添 ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
实现html表单下划线可输入/css实现input只显示下划线
只需要设置input的边框属性,设置底边框颜色为黑色即可 input{border-bottom: 1px solid #000;border-top: 0px;border-left: 0px;bo ...
xticklabel 显示下划线_[转载]matlab坐标轴属性及标注
注:'gca'可以理解为'get the current axis'的缩写: 'gcf'可以理解为'get the current figure'的缩写 1. 控制坐标轴尺度长度: set(gca,' ...
CSS 控制 input 只显示下划线效果
由于页面设计需要,有时我们可能会出现只有下划线(底部边框)的input,如下图所示那么怎么实现这种效果呢? 其实很简单,只要从边框(border)入手就可以了比如将上.右.左边框宽度设置为0,下边 ...
CSS 控制 input 只显示下划线效果 1
由于页面设计需要,有时我们可能会出现只有下划线(底部边框)的input,如下图所示那么怎么实现这种效果呢? 其实很简单,只要从边框(border)入手就可以了比如将上.右.左边框宽度设置为0,下边 ...
html隐藏input边框线,html中去掉文本框(input type=text)的边框或只显示下边框
去掉: 只留下边框: CSS - input 只显示下边框 CSS 样式 : border:none; border-bottom: 1px solid #000 文本框input:text ...
css 下划线_（06）CSS 给文本加样式：② 文本属性 | CSS
原创:itsOli @前端一万小时本文首发于公众号「前端一万小时」本文版权归作者所有,未经授权,请勿转载!本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 ❗ ...
java 转xml 变成两根下划线_XStream实现xml和java对象之间的互相转换(包括对属性，别名，下划线_的处理)，同理JSON也可以...
首先去官网下载响应JAR包最少需要两个jar包,一个xstream.jar,一个是xmlpull.jar 首先来看下java对象到xml的转换 package xml; class PhoneNum ...

vc 文本框只显示下划线_【Axure9百例】36.文本框搜索自动匹配

vc 文本框只显示下划线_【Axure9百例】36.文本框搜索自动匹配相关推荐

最新文章

热门文章

vc 文本框 只显示下划线_【Axure9百例】36.文本框搜索自动匹配

vc 文本框 只显示下划线_【Axure9百例】36.文本框搜索自动匹配相关推荐

最新文章

热门文章

vc 文本框只显示下划线_【Axure9百例】36.文本框搜索自动匹配

vc 文本框只显示下划线_【Axure9百例】36.文本框搜索自动匹配相关推荐