本文主要為大家講解交互案例，借助中繼器實現(xiàn)百度搜索提示的效果，此講解主要適用于具有一定的Axure使用基礎(chǔ)的人員。

當我們使用搜索引擎輸入關(guān)鍵詞的時候，搜索引擎會根據(jù)搜索詞，模糊匹配推薦一些相關(guān)的內(nèi)容在搜索框的下方顯示，這里也包含了我們的搜索記錄。

點擊搜索按鈕，搜索引擎就會執(zhí)行搜索，利用爬蟲抓取的網(wǎng)頁，按照一定的算法返回搜索結(jié)果列表。

那么這樣的原型交互效果，是否可以通過Axure完成制作了？

這就是今天為大家講解的交互案例，借助中繼器實現(xiàn)百度搜索提示的效果。

本案例的講解適用于具有一定的Axure使用基礎(chǔ)的人員，關(guān)于工具的操作步驟不做詳細講解。本文講述的重點在于——邏輯的梳理以及一些啟發(fā)性的思路與方法，希望能夠幫助大家做出更酷炫的交互效果。

一、準備元件

本案例中需要用到的元件有文本框、矩形按鈕和中繼器。

文本框用于輸入搜索詞，這里的類型需要設置為查找。矩形按鈕可以直接從元件庫中拖拽至搜索框右側(cè)，并將按鈕中的文字修改為“搜索”。

中繼器用來顯示提示詞列表——即根據(jù)搜索內(nèi)容索引出來的列表，這里需要注意將中繼器轉(zhuǎn)換為動態(tài)面板，因為動態(tài)面板可以根據(jù)內(nèi)容自動擴展尺寸，默認隱藏動態(tài)面板。

元件準備部分重點講解中繼器在本案例中的應用，首先為中繼器數(shù)據(jù)集column0這一列預設一些內(nèi)容（iphone、iphone7、iphone8、iphone8plus、iphonex、iphonex價格、iphonex配置、iphonex換屏、二手iphonex、維修iphone），共有10項數(shù)據(jù)內(nèi)容；然后在為中繼器的項設置一個鼠標懸停的交互樣式，填充色設置為灰色；最后在將中繼器項的邊框顏色去掉。至此，中繼器的顯示效果完成了，看上去與百度的效果基本一致。

二、交互設置

中繼器的設置

第一個為中繼器設置每項加載時事件（注意這里的交互設置的對象是中繼器不是項），目的是為中繼器的項加載內(nèi)容，在文本設置中將中繼器項的值設置為函數(shù)[[Item.Column0]]。

第二個為中繼器的項設置單擊事件，在文本設置中將搜索框的值設置為項的值，即函數(shù)[[this.text]]，并隱藏中繼器動態(tài)面板。

加載中繼器的項

將項的值傳遞給文本搜索框

文本框-文本改變事件

為文本框添加一個文本改變事件，當文本框的內(nèi)容改變時，我們希望達到這樣的效果——顯示中繼器動態(tài)面板，移除之前的篩選結(jié)果，重新按照新的搜索詞進行索引篩選。

這里需要說明的是：添加新的篩選時，需要設定一個條件，即當中繼器數(shù)據(jù)集中包含搜索的內(nèi)容時，執(zhí)行篩選并顯示出來，需要插入這樣一個函數(shù)[[TargetItem.Column0.indexOf(LVAR1)>-1]]執(zhí)行新的篩選。

文本改變事件還需要添加另一個用例case2，用例中添加一個條件即如果文本框的內(nèi)容為空，則執(zhí)行的動作為隱藏中繼器動態(tài)面板，記得將case2切換為if，case2通常默認為else if。

文本框設置文本改變事件

搜索按鈕-單擊事件

首先需要想清楚，點擊搜索按鈕后我們希望達到的效果是怎樣的？

如果輸入的搜索詞不在中繼器數(shù)據(jù)集里面，這時候我們需要在中繼器數(shù)據(jù)集中添加這一條數(shù)據(jù)。再次點擊按鈕，首先移除之前的全部篩選， 添加新的篩選，這里的篩選規(guī)則為精確索引。梳理清楚邏輯規(guī)則后，下面我們來看下如何設置交互事件。

為搜索按鈕設置單擊事件，添加第一個用例，在編輯條件中編輯函數(shù)，首先將中繼器設置為局部變量LAVR1，然后插入函數(shù)[[LVAR1.itemCount]]（篩選結(jié)果的數(shù)量），在編輯條件中設置值等于0，添加動作數(shù)據(jù)集添加行，在添加行到中繼器時，先將文本框定義為局部變量LVAR1，然后在將這個局部變量添加到行。

添加第二個用例case2，動作設置中首先移除全部篩選，然后在添加新篩選中設置篩選條件為[[TargetItem.Column0==LVAR1]]。LVAR1為文本框定義的變量，TargetItem.Column0表達的意思為中繼器數(shù)據(jù)集Column0這一列數(shù)據(jù)，這里的數(shù)據(jù)包含之前篩選的結(jié)果。

搜索按鈕設置鼠標單擊事件

篩選結(jié)果的數(shù)量并不等于數(shù)據(jù)集項的數(shù)量，我們可以做個實驗：添加兩個按鈕，一個顯示篩選結(jié)果的數(shù)量，一個顯示數(shù)據(jù)集項的數(shù)量。在中繼器項的加載事件中添加兩個動作，設置兩個按鈕的文本值分別為函數(shù)[[Item.Repeater.itemCount]]和[[Item.Repeater.dataCount]]。（設置的截圖可參照上文?加載中繼器的項）

三、最后的總結(jié)

到此為止，模擬百度搜索提示的交互效果已經(jīng)完成了，預覽你的原型，欣賞你辛苦半天的作品吧。

本案例中的重點在于——中繼器的綜合運用。中繼器是Axure7.0版本之后新增加的功能，中繼器可以看做成一個本地的小型數(shù)據(jù)庫。熟練應用以后，還可以實現(xiàn)電商列表的篩選，管理后臺的條件查詢或是在線隨機抽獎等效果。

本案例的源文件鏈接：https://pan.baidu.com/s/1c2rXauc 密碼:h3ta

?附：中繼器函數(shù)說明

• Repeater 用途：中繼器的對象。Item.Repeater即為Item所在的中繼器對象。
• visibleItemCount 用途：中繼器項目列表中可見項的數(shù)量。比如：項目列表共有15項，分頁顯示為每頁6項。當項目列表在第1、2頁時，可見項數(shù)量為6；當項目列表在第3頁時，可見項數(shù)量為3。
• itemCount 用途：獲取中繼器項目列表的總數(shù)量，或者叫加載項數(shù)量。默認情況下項目列表的總數(shù)量會與中繼器數(shù)據(jù)集中的數(shù)據(jù)行數(shù)量一致，但是，如果進行了篩選，項目列表的總數(shù)量則是篩選后的數(shù)量，這個數(shù)量不受分頁影響。
• dataCount 用途：獲取中繼器數(shù)據(jù)集中數(shù)據(jù)行的總數(shù)量。
• pageCount 用途：獲取中繼器分頁的總數(shù)量，即能夠獲取分頁后共有多少頁。
• pageIndex 用途：獲取中繼器項目列表當前顯示內(nèi)容的頁碼。
• Item 用途：獲取數(shù)據(jù)集一行數(shù)據(jù)的集合，即數(shù)據(jù)行的對象。
• TargetItem 用途：目標數(shù)據(jù)行的對象。
• Item.列名 用途：獲取數(shù)據(jù)行中指定列的值。
• index 用途：獲取數(shù)據(jù)行的索引編號，編號起始為1，由上至下每行遞增1。
• isFirst 用途：判斷數(shù)據(jù)行是否為第1行？如果是第1行，返回值為“True”，否則為“False”。
• isLast 用途：判斷數(shù)據(jù)行是否為最末行？如果是最末行，返回值為“True”，否則為“False”。
• isEven 用途：判斷數(shù)據(jù)行是否為偶數(shù)行？如果是偶數(shù)行，返回值為“True”，否則為“False”。
• isOdd 用途：判斷數(shù)據(jù)行是否為奇數(shù)行？如果是奇數(shù)行，返回值為“True”，否則為“False”。
• isMarked 用途：判斷數(shù)據(jù)行是否為被標記？如果被標記，返回值為“True”，否則為“False”。
• isVisible 用途：判斷數(shù)據(jù)行是否為可見行？如果是可見行，返回值為“True”，否則為“False”。

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

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