編輯導讀：多選選項是產品的一個基礎功能，本文以豆瓣的添加話題頁面為例，講講如何在Axure9中實現帶模糊搜索的多選選擇器效果，一起來看看吧。

一、交互效果說明

1.點擊話題列表中的話題選項，上方輸入框內顯示選擇的話題標簽，最多可選擇5個標簽，超出將有文字提示。

2.點擊輸入框內已選擇的話題標簽的刪除按鈕,可以刪除已選擇的話題標簽，并且該標簽返回至下方話題列表中。

3.在輸入框中輸入話題關鍵字可自動匹配對應的話題選項。

效果預覽：

原型預覽鏈接：https://wn0a1h.axshare.com

二、元件準備

1.拖入一個矩形元件，設置寬度：560px，高度：44px，圓角半徑為2，命名為「input_bg」；

在其上方拖入一個文本框，隱藏其邊框，命名為「Input」。

2.拖入一個中繼器元件，雙擊進入中繼器，刪除自帶的矩形，拖入兩個文本標簽，右鍵設置為組合并命名為「Option」；

設置中繼器的布局為垂直，行間距為15，將此中繼器命名為「List」。

3.再拖入一個中繼器元件，雙擊進入中繼器，設置矩形元件的寬度：70px,高度：24px，顏色：#F2F2F2，將其命名為「Selected_Option」；

拖入一個刪除的圖標，置于「Selected_Option」的上方，命名為「Delete」；

設置中繼器的布局為水平，列間距為10，中繼器命名為「Selected_List」。

4.拖入一個文本標簽，置于中繼器「List」上方，設置文本顏色：#EC1111，輸入內容：“最多只能選擇5個”，命名為「Notice」，點擊右鍵將其設為隱藏。

所有元件如下：

三、添加交互

中繼器綁定數據。

1.在中繼器「List」的樣式面板中，分別填充3列數據【Topic】【Description】【State】，這里設置【State】的值均為1;

2.在右側交互面板中，添加【每項加載時】的交互，設置文本標簽【話題】的文本值為[[Item.Topic]]；設置文本標簽【描述】的文本值為[[Item.Description]]；

3.添加【載入時】【添加篩選】的交互，目標為「List」，規則為：[[Item.State==’1′]]，選中【移除其它選項】；

這里設置篩選意為：當數據【State】的值為1時，篩選顯示對應的話題選項，默認「List」的話題是全部顯示的，所以數據【State】的默認值全部為“1”。

4.設置完成后將此中繼器右鍵轉化為動態面板，高度為252px,顯示垂直滾動條。

5.同理我們也給中繼器「Selected_List」填充數據并添加交互，初始狀態下輸入框內的話題標簽是全部不顯示的，所以給【SelectedState】一欄的數據值全部設置為0。

添加模糊篩選效果。

1.給文本框「Input」添加【文本改變時】的交互：

添加情形1，當文本框「Input」輸入的文字不為空時，

設置動作【添加篩選】，目標「List」,名稱「search」，規則：[[Item.Topic.indexOf(LVAR1)>-1]]；

添加局部變量，設置【LVAR1】【==】【元件文字】「input」；

2.添加情形2，當文本框輸入的文字為空時，設置動作【移除篩選】，目標「List」，過濾「search」。

字符串函數“indexOf()”能夠查詢字符串對象中是否能夠找到參數字符串，函數的運算結果>-1代表能夠找到參數字符串。

點擊「List」中的話題，在「List」移除此話題選項，同時「Selected_List」中顯示對應話題標簽。

1.添加一個全局變量「SelectedVariable」，默認值為「0」，用來判斷標簽的個數。

2.雙擊進入中繼器「List」，給組合「Option」添加【單擊時】的交互：

添加情形1，如果全局變量的值「SelectedVariable」＜5時，

• 設置全局變量「SelectedVariable」值為[[SelectedVariable+1]]；
• 設置【標記行】，目標「List」【當前】行；
• 設置【標記行】，目標「Selected_List」，規則：[[TargetItem.SelectedTopic == Item.Topic]]；
• 設置【更新行】目標「List」，選擇【已標記】行，「State」列，值為“0”；
• 設置【更新行】目標「Selected_List」，選擇【已標記】行，「SelectedState」列，值為“1“；
• 【移動】文本框「Input」【經過】【x】值為“80”；
• 【取消標記】「Selected_List」及「List」的全部行；
• 設置文本框「Input」文字為空。

TargetItem為中繼器中的函數，意為目標數據行的對象。

3.繼續給上述交互添加情形2，全局變量「SelectedVariable」的值≥5時，添加動作【顯示】提示文本「Notice」。

全部交互如下：

點擊中繼器「Selected_List」中的「Delete」按鈕，在「Selected_List」移除此選項，同時「List」中顯示對應選項。

雙擊進入中繼器「Selected_List」給刪除按鈕添加「Delete」添加【單擊時】的交互

• 設置全局變量「SelectedVariable」值為[[SelectedVariable-1]]
• 設置【標記行】，目標「Selected_List」【當前】行；
• 設置【標記行】，目標「List」規則：[[TargetItem.Topic == Item.SelectedTopic]]；
• 設置【更新行】，目標「List」【已標記】行「State」列，值為“1”；
• 設置【更新行】，目標「Selected_List」【已標記】行，「SelectedState」列，值為“0“；
• 【移動】「Input」【經過】【x】“-80”；
• 【取消標記】「Selected_List」及「List」的全部行；
• 【隱藏】提示文本「Notice」。

本文由 @Daisy 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議