當(dāng)我們使用搜索引擎輸入關(guān)鍵詞的時候，搜索引擎會根據(jù)搜索詞模糊匹配推薦一些相關(guān)的內(nèi)容在搜索框的下方顯示狂秦，這里也包含了我們的搜索記錄灌侣。點擊搜索按鈕，搜索引擎就會執(zhí)行搜索裂问，利用爬蟲抓取的網(wǎng)頁侧啼，按照一定的算法返回搜索結(jié)果列表。 那么這樣的原型交互效果堪簿，是否可以通過Axure完成制作了痊乾？這就是今天為大家講解的交互案例，借助中繼器實現(xiàn)百度搜索提示的效果椭更。
本案例的講解適用于具有一定的Axure使用基礎(chǔ)的人員哪审，關(guān)于工具的操作步驟不做詳細(xì)講解。本文講述的重點在于邏輯的梳理以及一些啟發(fā)性的思路與方法虑瀑，希望能夠幫助大家做出更酷炫的交互效果湿滓。
01 準(zhǔn)備元件
本案例中需要用到的元件有文本框、矩形按鈕和中繼器舌狗。文本框用于輸入搜索詞叽奥，這里的類型需要設(shè)置為查找；矩形按鈕可以直接從元件庫中拖拽至搜索框右側(cè)痛侍，并將按鈕中的文字修改為“搜索”朝氓；中繼器用來顯示提示詞列表，即根據(jù)搜索內(nèi)容索引出來的列表恋日，這里需要注意將中繼器轉(zhuǎn)換為動態(tài)面板膀篮，因為動態(tài)面板可以根據(jù)內(nèi)容自動擴(kuò)展尺寸嘹狞，默認(rèn)隱藏動態(tài)面板岂膳。
元件準(zhǔn)備部分重點講解中繼器在本案例中的應(yīng)用，首先為中繼器數(shù)據(jù)集column0這一列預(yù)設(shè)一些內(nèi)容（iphone磅网、iphone7谈截、iphone8、iphone8plus、iphonex簸喂、iphonex價格毙死、iphonex配置、iphonex換屏喻鳄、二手iphonex扼倘、維修iphone），共有10項數(shù)據(jù)內(nèi)容除呵；然后在為中繼器的項設(shè)置一個鼠標(biāo)懸停的交互樣式再菊，填充色設(shè)置為灰色；最后在將中繼器項的邊框顏色去掉颜曾。至此纠拔，中繼器的顯示效果完成了，看上去與百度的效果基本一致泛豪。
02 交互設(shè)置
a 中繼器
這里主要有兩個交互事件稠诲，第一個為中繼器設(shè)置每項加載時事件（注意這里的交互設(shè)置的對象是中繼器不是項）容为，目的是為中繼器的項加載內(nèi)容密浑，在文本設(shè)置中將中繼器項的值設(shè)置為函數(shù)[[Item.Column0]]偿渡；第二個為中繼器的項設(shè)置單擊事件言缤，在文本設(shè)置中將搜索框的值設(shè)置為項的值眨业，即函數(shù)[[this.text]]薪缆，并隱藏中繼器動態(tài)面板烛缔。
b 文本框
為文本框添加一個文本改變事件怒竿，當(dāng)文本框的內(nèi)容改變時荠雕，我們希望達(dá)到這樣的效果：顯示中繼器動態(tài)面板稳其，移除之前的篩選結(jié)果，重新按照新的搜索詞進(jìn)行索引篩選炸卑。這里需要說明的是添加新的篩選時既鞠，需要設(shè)定一個條件，即當(dāng)中繼器數(shù)據(jù)集中包含搜索的內(nèi)容時盖文，執(zhí)行篩選并顯示出來嘱蛋，需要插入這樣一個函數(shù)[[TargetItem.Column0.indexOf(LVAR1)>-1]]執(zhí)行新的篩選。文本改變事件還需要添加另一個用例case2五续，用例中添加一個條件即如果文本框的內(nèi)容為空洒敏，則執(zhí)行的動作為隱藏中繼器動態(tài)面板，記得將case2切換為if疙驾，case2通常默認(rèn)為else if凶伙。
c 搜索按鈕
首先需要想清楚，點擊搜索按鈕后我們希望達(dá)到的效果是怎樣的它碎。如果輸入的搜索詞不在中繼器數(shù)據(jù)集里面函荣，這時候我們需要在中繼器數(shù)據(jù)集中添加這一條數(shù)據(jù)显押；再次點擊按鈕，首先移除之前的全部篩選傻挂， 添加新的篩選乘碑，這里的篩選規(guī)則為精確索引。梳理清楚邏輯規(guī)則后金拒，下面我們來看下如何設(shè)置交互事件兽肤。
為搜索按鈕設(shè)置單擊事件，添加第一個用例绪抛，在編輯條件中編輯函數(shù)轿衔，首先將中繼器設(shè)置為局部變量LAVR1，然后插入函數(shù)[[LVAR1.itemCount]]（篩選結(jié)果的數(shù)量）,在編輯條件中設(shè)置值等于0睦疫，添加動作數(shù)據(jù)集添加行害驹，在添加行到中繼器時，先將文本框定義為局部變量LVAR1蛤育，然后在將這個局部變量添加到行宛官。
添加第二個用例case2，動作設(shè)置中首先移除全部篩選瓦糕，然后在添加新篩選中設(shè)置篩選條件為[[TargetItem.Column0==LVAR1]]底洗。LVAR1為文本框定義的變量，TargetItem.Column0表達(dá)的意思為中繼器數(shù)據(jù)集Column0這一列數(shù)據(jù)咕娄，這里的數(shù)據(jù)包含之前篩選的結(jié)果亥揖。
篩選結(jié)果的數(shù)量并不等于數(shù)據(jù)集項的數(shù)量，我們可以做個實驗圣勒，添加兩個按鈕费变，一個顯示篩選結(jié)果的數(shù)量，一個顯示數(shù)據(jù)集項的數(shù)量圣贸。在中繼器項的加載事件中添加兩個動作挚歧，設(shè)置兩個按鈕的文本值分別為函數(shù)[[Item.Repeater.itemCount]]和[[Item.Repeater.dataCount]]。（設(shè)置的截圖可參照上文?加載中繼器的項）
03 最后的總結(jié)
到此為止吁峻，模擬百度搜索提示的交互效果已經(jīng)完成了滑负，預(yù)覽你的原型，欣賞你辛苦半天的作品吧用含。本案例中的重點在于中繼器的綜合運(yùn)用矮慕，中繼器是Axure7.0版本之后新增加的功能，中繼器可以看做成一個本地的小型數(shù)據(jù)庫啄骇。熟練應(yīng)用以后痴鳄，還可以實現(xiàn)電商列表的篩選，管理后臺的條件查詢或是在線隨機(jī)抽獎等效果肠缔。
本案例的源文件鏈接:https://pan.baidu.com/s/1c2rXauc 密碼:h3ta
?附：中繼器函數(shù)說明
Repeater 用途：中繼器的對象夏跷。Item.Repeater即為Item所在的中繼器對象哼转。
visibleItemCount 用途：中繼器項目列表中可見項的數(shù)量明未。比如：項目列表共有15項槽华，分頁顯示為每頁6項。當(dāng)項目列表在第1趟妥、2頁時猫态，可見項數(shù)量為6；當(dāng)項目列表在第3頁時披摄，可見項數(shù)量為3亲雪。
itemCount 用途：獲取中繼器項目列表的總數(shù)量，或者叫加載項數(shù)量疚膊。默認(rèn)情況下項目列表的總數(shù)量會與中繼器數(shù)據(jù)集中的數(shù)據(jù)行數(shù)量一致义辕，但是，如果進(jìn)行了篩選寓盗，項目列表的總數(shù)量則是篩選后的數(shù)量灌砖，這個數(shù)量不受分頁影響。
dataCount 用途：獲取中繼器數(shù)據(jù)集中數(shù)據(jù)行的總數(shù)量傀蚌。
pageCount 用途：獲取中繼器分頁的總數(shù)量基显，即能夠獲取分頁后共有多少頁。
pageIndex 用途：獲取中繼器項目列表當(dāng)前顯示內(nèi)容的頁碼善炫。
Item 用途：獲取數(shù)據(jù)集一行數(shù)據(jù)的集合撩幽，即數(shù)據(jù)行的對象。
TargetItem 用途：目標(biāo)數(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ù)行是否為被標(biāo)記；如果被標(biāo)記瓤漏，返回值為“True”腾夯，否則為“False”。
isVisible 用途：判斷數(shù)據(jù)行是否為可見行蔬充；如果是可見行蝶俱，返回值為“True”，否則為“False”饥漫。
如果你對Axure或原型設(shè)計有興趣榨呆，希望系統(tǒng)性地學(xué)習(xí)Axure知識，掌握更多Axure使用技巧庸队；或者希望通過臨摹交互案例积蜻，進(jìn)一步提升高保交互設(shè)計能力。請點擊下方關(guān)注按鈕皿哨，查看更多連載作品浅侨。
