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

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

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

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

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

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

一、準(zhǔn)備元件

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

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

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

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

二、交互設(shè)置

中繼器的設(shè)置

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

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

加載中繼器的項(xiàng)

將項(xiàng)的值傳遞給文本搜索框

文本框-文本改變事件

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

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

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

文本框設(shè)置文本改變事件

搜索按鈕-單擊事件

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

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

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

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

搜索按鈕設(shè)置鼠標(biāo)單擊事件

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

三、最后的總結(jié)

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

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

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

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

• Repeater 用途：中繼器的對(duì)象。Item.Repeater即為Item所在的中繼器對(duì)象。
• visibleItemCount 用途：中繼器項(xiàng)目列表中可見項(xiàng)的數(shù)量。比如：項(xiàng)目列表共有15項(xiàng)，分頁顯示為每頁6項(xiàng)。當(dāng)項(xiàng)目列表在第1、2頁時(shí)，可見項(xiàng)數(shù)量為6；當(dāng)項(xiàng)目列表在第3頁時(shí)，可見項(xiàng)數(shù)量為3。
• itemCount 用途：獲取中繼器項(xiàng)目列表的總數(shù)量，或者叫加載項(xiàng)數(shù)量。默認(rèn)情況下項(xiàng)目列表的總數(shù)量會(huì)與中繼器數(shù)據(jù)集中的數(shù)據(jù)行數(shù)量一致，但是，如果進(jìn)行了篩選，項(xiàng)目列表的總數(shù)量則是篩選后的數(shù)量，這個(gè)數(shù)量不受分頁影響。
• dataCount 用途：獲取中繼器數(shù)據(jù)集中數(shù)據(jù)行的總數(shù)量。
• pageCount 用途：獲取中繼器分頁的總數(shù)量，即能夠獲取分頁后共有多少頁。
• pageIndex 用途：獲取中繼器項(xiàng)目列表當(dāng)前顯示內(nèi)容的頁碼。
• Item 用途：獲取數(shù)據(jù)集一行數(shù)據(jù)的集合，即數(shù)據(jù)行的對(duì)象。
• TargetItem 用途：目標(biāo)數(shù)據(jù)行的對(duì)象。
• Item.列名 用途：獲取數(shù)據(jù)行中指定列的值。
• index 用途：獲取數(shù)據(jù)行的索引編號(hào)，編號(hào)起始為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ù)行是否為被標(biāo)記？如果被標(biāo)記，返回值為“True”，否則為“False”。
• isVisible 用途：判斷數(shù)據(jù)行是否為可見行？如果是可見行，返回值為“True”，否則為“False”。

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

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