自定义搜索(手机浏览器怎么自定义搜索引擎)

在Surge APP中，字母定位和模糊搜索是快速找到相应内容的常用方式。笔者以手机通讯录为案例，分享如何在Axure中实现字母定位+模糊搜索的交互效果。让我们看一看。

在手机APP中，字母定位和模糊搜索是快速找到相应内容的常用方式。今天笔者就以手机通讯录为案例，教大家如何在Axure中实现信件定位和模糊搜索的交互效果:

原型地址:https://3ipx79.axshare.com

这个案例教程主要是用复读机做人物列表，做好以后再用就很方便了。我们可以通过在复读机表单中填写相应的信息来自动生成交互效果，所以推荐大家使用。一起开始学习怎么做吧~

一、人物信息列表的制作

我们使用repeater，在repeater的西边放一个底白的长方形，一个图片元素(对应一个人的头像)和一个文字标签(对应一个人的名字)，如下图:

在repeater表中，我们插入对应的两列，分别是name(对应人物的名字)和picture(对应人物的头像)。我们在repeater表中填入姓名，导入对应的头像图片:

在加载repeater的每一项时，设置交互，用设置文本的交互将表格中name列的值设置为文本标签，然后用设置图片的交互将表格中图片中的图片设置为图片元素。

二、模糊搜索效果的制作

我们需要一个输入框，搜索按钮，取消按钮，背景矩形和搜索背景矩形，放置如下图所示:

移动端一般不需要按键搜索按钮，所以我们在文字变化的时候在输入框写过滤交互，我们用过滤交互过滤复读机。这里我们需要使用indexof函数target item . name . index of(this . text)来查看当前文本框中输入的值是否包含在repeater表的name列的值中。如果包含，结果会大于-1，所以我们的筛选条件是筛选出大于-1的值。

以上是最基本的模糊搜索。如果需要考虑大小写关系，比如名字叫cat，用上面的方式输入CAT是无法搜索到的。如果要实现不区分大小写的搜索，可以使用toUpperCase函数，将所有对应的值转换为大写，将name列和输入框中的值转换为大写，这样就可以进行不区分大小写的模糊搜索交互了。

这里，考虑到没有搜索结果，我们在repeater的第一行添加一个文本标签(无文本)。至于底层，只是被中继器屏蔽了。如果任何一行都没有结果，您将看到以下提示文本。如果有数据，数据就会屏蔽。

如果搜索框要有顶级的效果，我们就把repeater和上面的提示文字变成动态面板，然后调出垂直滚动条，或者把搜索区域的组件变成左上角固定的动态面板。

之后我们把所有的组件组合变成动态面板，把状态命名为搜索页，添加一个新状态，放在最上面，命名为通讯录，在上面做字母定位的效果。

因此，当单击“取消”按钮时，我们将取消搜索过滤。这里我们可以通过设置文本的交互，将输入框的值设置为空，然后通过设置面板状态的交互，将这个动态面板设置为通讯录状态。

三、通讯录页面的设置

它是主锚点矩形和重复项、搜索图标以及A-Z和#的单词，它们的位置如下图所示:

上面的通讯录、搜索图片、背景矩形可以变成动态面板，固定在左上角。

用鼠标点击搜索按钮，我们会用设置面板状态的交互来设置整个动态面板跳转到搜索页面，就是上面的内容。

在下面的部分，我们应该先用矩形作为ABCD的锚点……...然后我们可以复制上一部分做的复读机，按照内容分开放置在对应的锚点下面。

把它们一一放到相应的位置后，我们添加A-Z和#符号，把它们变成动态面板，固定在右边相应的位置。

当鼠标点击一个字母时，我们利用滚动到组件的交互作用在矩形A中设置锚点，增加了线性动画效果。

当鼠标点击字母B时，我们利用滚动到组件的交互，在矩形B中设置锚点，并添加线性动画效果。

当点击鼠标C字母时，我们利用滚动到组件的交互，在矩形C中设置锚点，增加了线性动画效果。

……

当鼠标点击字母Z时，我们利用滚动到组件的交互，在矩形Z中设置锚点，增加了线性动画效果。

当点击鼠标#时，我们利用滚动到组件的交互，在矩形#中设置锚点，并添加线性动画效果。

我们已经完成了字母定位的效果。

这样，我们就完成了高保真通讯录原型模板的制作。以后我们使用的时候，只需要填写复读机表格，调整位置，就可以自动生成模糊搜索和字母状态的效果。不方便吗？

这就是用通讯录查找案例教程的全部内容。感谢您的阅读。下次见。

本文由@Axure Hi-Fi Prototype原创发布。每个人都是产品经理。未经许可，禁止复制。

题目来自Unsplash，基于CC0协议。

此观点仅代表作者本人，大家都是产品经理。平台只提供信息存储空服务。