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

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

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

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

拖拽中繼器：

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

設(shè)置賦值：

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

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

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

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

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

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

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

舉例來(lái)說(shuō)：

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

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

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

為了便于大家理解這個(gè)字符串，我在這舉例說(shuō)明：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最后，整個(gè)百度搜索的方式就制作出來(lái)了。

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

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

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