用中繼器制作篩選，使用函數(shù)變量制作關(guān)鍵字變色

整個步驟關(guān)鍵有兩步：

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

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

拖拽中繼器：

編輯數(shù)據(jù)：

設(shè)置賦值：

得到數(shù)據(jù)庫：

第二步，通過建立搜索框，對搜索框進(jìn)行編輯案例。

這一步的難點(diǎn)在于：

1. 如何篩選出我們想要的數(shù)據(jù)；
2. 如何對我們選出的內(nèi)容進(jìn)行變色。

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

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

現(xiàn)在問題就出現(xiàn)了：中繼器只能做到篩選內(nèi)容與你的數(shù)據(jù)庫內(nèi)容的位置一一對應(yīng)。

舉例來說：

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

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

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

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

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

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

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

按F5進(jìn)行預(yù)覽，效果如下：

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

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

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

通過此方法就可以篩選出我們想要的關(guān)鍵字搜索結(jié)果。

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

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

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

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

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

舉例來解釋此函數(shù)：

準(zhǔn)備好文本框b和矩形a。

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

（0,5）指的是第一個字符到第五個字符，預(yù)覽結(jié)果如下：

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

我們通過結(jié)合上一步的函數(shù)，可以推導(dǎo) 出：

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

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

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

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

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

原型預(yù)覽：http://er0yg0.axshare.com

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

本文為作者@梁漩智 原創(chuàng)投稿發(fā)布，轉(zhuǎn)載請注明來源于人人都是產(chǎn)品經(jīng)理并附帶本文鏈接