在這個網際網路時代，每天都會用到搜尋功能，手機，網頁，各種各樣的搜尋框，而且做得越來越出色，只要輸入部分關鍵詞，就能看到很多候選詞，可以幫助到無法準確定位自己想要搜尋的東西，這樣做解決了很大部分人的選擇困擾。本文將會帶帶大家學習如何在Axure（http://www.axurechina.cc/）實現搜尋框聯想詞效果。
　　首先下載Axure(http://www.axurechina.cc/download.html)軟體，安裝成功之後啟動軟體，在頁面中拖入一個“文字框”元件，調整大小為W:325
H:25，並命名為“搜尋框”，為了能夠美化效果，把文字框的“隱藏邊框”勾選上。

接下來在頁面中拖入一個“中繼器”放在文字框下方合適的位置，然後雙擊中繼器進入下一頁面，把頁面內的矩形調整大小為W:325
H:25，並將四周邊框取消，此處取消邊框的作用也是為了美觀。

回到預設頁面，為拖入的中繼器命名為“候選詞”：

接著給“搜尋框”元件新增第一個用例，若搜尋框內文字改變時，需要先對文字新增判斷條件，再執行動作，所以我們為第一個用例新增一個判斷條件。
　　新增篩選動作於“候選詞”這個中繼器。

配置篩選函式，先新增一個區域性變數，也就是搜尋框中的文字。

先插入一箇中繼器/資料集的函式<Item.Column0>。

再插入一個字串函式<substrate(start,length)>。

最後調整函式表達如下圖所示，然後確定，篩選函式設定完畢。

此時新增顯示“候選詞”動作，表明符合篩選條件的情況下顯示中繼器內容。

然後為“文字改變時”狀態新增第二個用例，設定當判斷條件“<1時”。

隱藏“候選詞”這個中繼器。

最後，當頁面載入時，設定中繼器為“隱藏”狀態。

完成以上所有步驟，實現就能搜尋框聯想詞效果，最基本的思路就是“篩選—呈現”。
　　因此基於這個思路，我們需要做的就是提供篩選資料，而中繼器是一個很好的資料容納工具，然後篩選，符合條件則呈現。
　　這個實現效果並不複雜，至於文中的函式部分我已經做了拆分理解，如果實在難以理解可以嘗試多去練習幾次這個效果，對於沒有寫程式碼基礎的同學是相對比較難理解。在多次練習後，就會有一定的認識，在日常中重要的是我們能夠理解其中的思路。
　　以上教程就已經全部介紹完了，希望對你有幫助。如果有更多感興趣的內容，可以訪問Axure中文網，瞭解更多資訊。
本篇文章來源於：