編輯導語：下拉搜索是我們常見的一種功能。在工作中，我們可能會需要利用Axure來實現(xiàn)下拉搜索設計。本篇文章里，作者就對如何使用Axure來制作下拉（模糊）搜索框進行了詳細介紹，一起來看一下吧。

原型展示：https://q5bvf7.axshare.com

所需原件：

1. 中繼器；
2. 文本框。

今天的課程，我們主要進一步了解如果使用函數(shù)式，實現(xiàn)下拉（模糊）搜索框的制作。

一、搜索框

如上圖所示，拖入文本框，作為搜索輸入框，文本標簽作為搜索框標題，搜索圖標作為搜索的指示，按上圖布局即可得到搜索框的初始模型。

二、下拉列表

如上圖，拖入中繼器，并做好數(shù)據(jù)填充和【每項加載】的設置，將數(shù)據(jù)中的【SF】賦值給【省份】的文本標簽。

三、交互設置

選中文本框，并添加【文本改變時】的交互，新建【添加篩選】的動作，設置規(guī)則為：[[(Item.SF.indexof(Text))>-1]]

雙擊中繼器，選中文本標簽，并添加【點擊時】將【Item.SF】賦值給到搜索文本框，同時設置為選中狀態(tài)。

四、細節(jié)優(yōu)化

將中繼器默認為隱藏狀態(tài)，并在點擊文本框時，顯示中繼器。

點擊中繼器的文本標簽后，隱藏中繼器。

本文由@Sam 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載。

題圖來自Unsplash, 基于CC0協(xié)議。