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

語言: CN / TW / HK

編輯導讀:多選選項是產品的一個基礎功能,本文以豆瓣的新增話題頁面為例,講講如何在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 協議