Axure9 教程：可模糊搜尋的多選效果

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

一、互動效果說明

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

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

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

效果預覽：

原型預覽連結： http://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 協議