文章講解了如何用Axure實(shí)現(xiàn)動(dòng)態(tài)模糊搜索的兩種樣式，與大家分享。

本人產(chǎn)品新人一枚，在學(xué)習(xí)axure中發(fā)現(xiàn)中繼器的使用之動(dòng)態(tài)模糊搜索的文章都比較散，想著寫一篇自己稍微整合的文章，希望對(duì)大家能有點(diǎn)用。本次文章分享以下兩種動(dòng)態(tài)模糊搜索的樣式：

1. 輸入關(guān)鍵詞，點(diǎn)擊搜索，查詢出對(duì)應(yīng)的信息列表；
2. 輸入關(guān)鍵詞，自動(dòng)查詢對(duì)應(yīng)的信息列表。

以下為正文：

01 輸入關(guān)鍵詞，點(diǎn)擊搜索，查詢對(duì)應(yīng)信息列表

1.1 中繼器內(nèi)容設(shè)置

（1）先拉入一個(gè)中繼器，雙擊中繼器，并且復(fù)制三個(gè)矩形出來(lái)（復(fù)制數(shù)量根據(jù)具體數(shù)據(jù)列）

（2）增加矩形后，回到中繼器的頁(yè)面，會(huì)發(fā)現(xiàn)已經(jīng)變成了三列。這時(shí)點(diǎn)擊中繼器，在右邊屬性下，增加對(duì)應(yīng)的列表信息。但此時(shí)中繼器還不會(huì)顯示增加的信息，需要在交互下設(shè)置對(duì)應(yīng)的變量名后，才會(huì)顯示。

給對(duì)應(yīng)的列設(shè)置對(duì)應(yīng)的變量（先勾選需要設(shè)置變量的中繼器，然后點(diǎn)擊fx，插入變量即可）

（3）此時(shí)回到中繼器的頁(yè)面，發(fā)現(xiàn)中繼器里面的內(nèi)容已經(jīng)填充進(jìn)去并顯示出來(lái)了。

1.2 輸入框和搜索框設(shè)置

（1）先拉入一個(gè)輸入框和搜索框，并且相應(yīng)命名為search（輸入框）和select（搜索框），方便后續(xù)使用，具體命名可自由設(shè)置。

（2）點(diǎn)擊搜索框，在屬性下找到交互下的“鼠標(biāo)單擊時(shí)”，雙擊該選項(xiàng)后，跳出用例編輯頁(yè)面，找到中繼器，選擇“添加篩選”，然后勾選配置動(dòng)作下的中繼器，下一步勾選“移除其他篩選”（不打鉤），最后點(diǎn)擊fx，進(jìn)入到設(shè)置頁(yè)面。

（3）點(diǎn)擊fx進(jìn)入編輯值頁(yè)面，先進(jìn)性局部變量的設(shè)置，按照以下步驟設(shè)置（給輸入框命名的用處就在這，方便查找），此步驟的意思是把輸入框里面輸入的內(nèi)容設(shè)置為變量，通過(guò)這個(gè)變量去與列表里面的內(nèi)容進(jìn)行比對(duì)。

（4）設(shè)置完局部變量后，開(kāi)始設(shè)置函數(shù)，即判斷變量在列表中是否重合。此處用的函數(shù)是indexof（變量），具體寫法參照下方講解。到這一步基本設(shè)置已經(jīng)完成了，接下來(lái)來(lái)看一下具體的使用效果。

1.3 使用效果（大家可以自己操作下，還是很簡(jiǎn)單的）

1.4 講解

函數(shù)為：[[(Item.xuhao.indexof(word)+Item.name.indexof(word)+Item.home.indexof(word))>-3]]

變量需要與列表的表頭一一對(duì)應(yīng)上，其中(Item.xuhao.indexof(word)、Item.name.indexof(word)、Item.home.indexof(word)代表的是用輸入框中獲取的值與列表中的內(nèi)容進(jìn)行對(duì)比，對(duì)應(yīng)的比較返回值大于-1即返回對(duì)應(yīng)的結(jié)果，因?yàn)槲覀冇?列，所以返回-3就可以了。

02 輸入關(guān)鍵詞，自動(dòng)查詢對(duì)應(yīng)的信息列表

2.1 說(shuō)明

這兩步的差別是一個(gè)輸入后，還需要點(diǎn)擊搜索才會(huì)出現(xiàn)結(jié)果，另一個(gè)是輸入關(guān)鍵詞后，自動(dòng)出現(xiàn)比對(duì)的結(jié)果。

這個(gè)效果的設(shè)置方式跟前者是一樣的，只是設(shè)置的對(duì)象由搜索框換成了輸入框，并且交互效果換成“文本改變時(shí)”。

2.2 輸入框設(shè)置

（1）點(diǎn)擊輸入框，在屬性下找到交互下的“文本改變時(shí)”，雙擊該選項(xiàng)后，跳出用例編輯頁(yè)面，找到中繼器，選擇“添加篩選”，然后勾選配置動(dòng)作下的中繼器，下一步勾選“移除其他篩選”（不打鉤），最后點(diǎn)擊fx，進(jìn)入到設(shè)置頁(yè)面。

（2）剩余步驟跟前者是一樣的，大家可以自己試著操作一下，這里就不多贅述了，直接看效果吧。

2.3 使用效果（沒(méi)有用動(dòng)圖，但是效果是可以實(shí)現(xiàn)的，可以自己操作下）

03 寫在結(jié)尾

大家在使用這個(gè)效果的時(shí)候，需要注意函數(shù)不能寫錯(cuò)，函數(shù)錯(cuò)了，多個(gè)字母或者少個(gè)符號(hào)都會(huì)出現(xiàn)問(wèn)題。

具體步驟還是比較簡(jiǎn)單的，大家多操作兩邊就熟悉了。

初次分享，還請(qǐng)大家多多指教。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議。