Axure RP是一套專門為網站或應用程序所設計的快速原型設計工具， 可以讓應用網站策劃人員或網站功能介面設計師，更快速且更簡易的建立Web AP和Website的wireframe、流程圖、prototype和規格。本文將介紹如何讓Axure實現類百度搜索原型的功能——關鍵字變色。Axure RP下載>>

通過中繼器制作篩選，使用函數變量可以制作關鍵字變色。整個實現過程主要分為兩步：

第一步，我們要通過中繼器制作好我們所需的數據庫，讓用戶可以搜索到

我們使用中繼器進行編輯，就是希望能夠通過中繼器所帶有的篩選功能可以對我們所需要的信息進行篩選。這里的信息可以隨便編輯，我在這里用歌手名來進行數據庫展示。

拖拽中繼器：

編輯數據：

<

設置賦值：

得到數據庫：

第二步，通過建立搜索框，對搜索框進行編輯案例。

這一步的難點在于：

1. 如何篩選出我們想要的數據；
2. 如何對我們選出的內容進行變色。

我們拖拽一個文本框，并命名為搜索文本框，然后編輯案例：文本改變時：

首先，針對第一點，中繼器自帶篩選功能，我們可以在文本改變時案例編輯里找到中繼器，然后選擇篩選功能。

現在問題就出現了：中繼器只能做到篩選內容與你的數據庫內容的位置一一對應。

舉例來說：

我想要通過搜索”姿&ldquo;來篩選出”孫燕姿“，中繼器是做不到的。它只能做到，搜索”孫燕姿“或者按順序搜索”孫“或者”孫燕“才來篩選出”孫燕姿“。這個大家可以試一試。

因此，我們必須換個思路。在這里我們使用的是通過字符串函數”[[LVAR.indexOf('searchValue')]]“進行篩選。

這個函數的意思是從頭到尾地檢索字符串 LVAR，看它是否含有子串 searchValue。如果找到一個 searchvalue，則返回 searchvalue 第一次出現的位置。如果要檢索的字符串值沒有出現，則該方法返回 -1。

為了便于大家理解這個字符串，我在這舉例說明：

添加一個矩形a，添加一個新文本框b，文本框輸入文字“孫燕姿2000年6月9日出道”以及原有的搜索文本框。

現在我們給搜索文本框編輯文本改變時案例——設置文本于矩形a=[[LVAR2.indexOf(LVAR1)]]

其中，局部變量LVAR1=搜索框文本，LVAR2=文本框b文本。

按F5進行預覽，效果如下：

從上面效果，我們可以看出，只要是文本框b有的，都是一個大于-1的值，如果輸入了文本框b沒有的，則輸出文本為-1。

因此，通過這個案例，我們不難做到，中繼器篩選函數設為：[[Item.Column0.indexOf(LVAR1)>-1]]

其中，局部變量LVAR1為搜索框文本。

通過此方法就可以篩選出我們想要的關鍵字搜索結果。

當我們通過這種方式，已經可以篩選出我們想要的數據庫后，我們需要完成如何給我們檢索的文字變色。

變色就意味必須要讓系統知道我們輸入的是什么文字。

目前，axure可輸出文字的有三個字符串函數：LVAR1.slice(start,end)，LVAR1.substr(start,length)以及LVAR1.substring(from,to)。

在這里，我們選擇LVAR1.slice(start,end)。另外兩個函數，如果不太懂，可以網上搜一搜，這里不做詳解。

[[LVAR.slice(start,end)]]是指：返回LVAR從 start 開始（包括 start）到 end 結束（不包括 end）為止的所有字符。這里的start和end指的是字符串所在的位置，0代表第一個位置，-1代表倒數第一個位置，而函數最后輸出來的就是具體的文字。

舉例來解釋此函數：

準備好文本框b和矩形a。

設置文本框b鼠標單擊時案例：設置文本于矩形a=[[LVAR1.slice(0,5)]]，其中LVAR1為文本框b文本。

（0,5）指的是第一個字符到第五個字符，預覽結果如下：

也就是說，如果能夠知道我們輸入的文字在篩選出來的數據庫中所在的位置，則能讀取出我們想要的文字。

我們通過結合上一步的函數，可以推導 出：

整個函數指的就是在篩選后的數據庫里，提取出文本框里的文字。也就是說假如現在只有這一個函數，我們輸入”姿“，最后在數據庫里，只會顯示”姿“。現在我們在函數的富文本編輯里，給它換個字體顏色，就可以完成變色的目標，效果如下：

我們已經完成了篩選換色目標，接下來就是還原前后兩部分文字。不難想象，既然我們知道了關鍵字的位置，就可以推到出前后兩部分，前部分，就應該是起始位置0，到我們關鍵字的起始位置；而后半部分，即是關鍵字最后一個字的位置，到結束止。具體函數如下：

前部分函數：[[Item.Column0.slice(0,Item.Column0.indexOf(LVAR1))]]，即提取首字符，到我們搜索文本框的第一個字符（不包括）止。

后部分函數：[[Item.Column0.slice(Item.Column0.indexOf(LVAR1)+LVAR1.length)]]，即提取搜索文本框輸入最后一個文字位置到整個數據庫文本的結束位置。

最后，整個百度搜索的方式就制作出來了。

原型預覽：//er0yg0.axshare.com

原型下載：//pan.baidu.com/s/1bn8mqsv

本文轉載自