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

一、交互效果說明

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

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

3.在輸入框中輸入話題關(guān)鍵字可自動匹配對應(yīng)的話題選項。

效果預(yù)覽：

原型預(yù)覽鏈接：https://wn0a1h.axshare.com

二、元件準備

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

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

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

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

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

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

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

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

所有元件如下：

三、添加交互

中繼器綁定數(shù)據(jù)。

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

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

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

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

4.設(shè)置完成后將此中繼器右鍵轉(zhuǎn)化為動態(tài)面板，高度為252px,顯示垂直滾動條。

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

添加模糊篩選效果。

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

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

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

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

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

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

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

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

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

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

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

TargetItem為中繼器中的函數(shù)，意為目標數(shù)據(jù)行的對象。

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

全部交互如下：

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

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

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

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

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