繼續(xù)本系列Axure函數(shù)教程，上一篇文章主要給大家分享了Slice、Concat、Math.floor等字符串處理函數(shù)的使用，本篇文章將結(jié)合中繼器給大家講解IndexOf函數(shù)的使用。

案例效果，見下圖：

描述：在搜索框輸入關(guān)鍵詞時(shí)，顯示關(guān)鍵詞列表，列表中的關(guān)鍵詞文字中包含輸入的關(guān)鍵詞文字；鼠標(biāo)單擊列表中的關(guān)鍵詞時(shí)，將該關(guān)鍵詞填入搜索框；鼠標(biāo)單擊頁面其他區(qū)域時(shí)，隱藏關(guān)鍵詞列表。

元件準(zhǔn)備：

• 文本框（用于輸入搜索內(nèi)容）：KeywordInput
• 組合（用于統(tǒng)一顯示隱藏關(guān)鍵詞列表中的元件）：KeywordGroup
• 中繼器（用于顯示關(guān)鍵詞列表項(xiàng)）：keywordList
• 文本標(biāo)簽（用于顯示關(guān)鍵詞列表項(xiàng)）：Keyword

思路分析：

• 創(chuàng)建關(guān)鍵詞列表搜索框；
• 搜索框中輸入文字時(shí)，顯示關(guān)鍵詞列表；
• 鼠標(biāo)進(jìn)入關(guān)鍵詞列表時(shí)，列表項(xiàng)呈現(xiàn)粉紅色文字和灰色背景；
• 鼠標(biāo)單擊列表項(xiàng)時(shí)，將被單擊列表項(xiàng)的文字寫入搜索框中；
• 鼠標(biāo)單擊頁面其他位置時(shí)，隱藏關(guān)鍵詞列表。

操作步驟：

（1）完成基礎(chǔ)數(shù)據(jù)設(shè)置，即完成中繼器中的關(guān)鍵詞列表中數(shù)據(jù)集、交互以及樣式的設(shè)置，

設(shè)置內(nèi)容見下圖：

（2）為文本框“KeywordInput”的【文字改變時(shí)】事件添加“case1”，設(shè)置條件判斷【元件文字】“當(dāng)前元件”（This）【！=】【值】“”（空值）；添加滿足條件時(shí)的動(dòng)作為【顯示】組合“KeywordGroup”。

條件判斷設(shè)置見下圖：

Case動(dòng)作設(shè)置見下圖：

（3）繼續(xù)下一步，添加動(dòng)作【添加篩選】到中繼器“KeywordList”，設(shè)置篩選{名稱}為“Search”，{條件}為“[[Item.Keyword.indexof（text）>=0]]”；條件公式的含義為：文本框中的文字在“item.Keyword”中首次出現(xiàn)的位置大于等于0，因?yàn)樽址凶址恢脧?開始計(jì)算，所以當(dāng)位置大于等于0時(shí)，表示文本框的文字包含在“Item.Keyword”中。

Case動(dòng)作設(shè)置見下圖：

其中使用到的函數(shù)說明：

IndexOf（參數(shù)1，參數(shù)2）：查詢參數(shù)1字符串在文本對(duì)象中首次出現(xiàn)的位置；參數(shù)1為查詢內(nèi)容的字符串；參數(shù)2位查詢的起始位置，該參數(shù)可省略，省略是表示從左側(cè)第一個(gè)位置開始查詢；字符位置從0開始計(jì)算，即第一個(gè)字符位置為0；如果文本對(duì)象未 包含參數(shù)1字符串，獲取到的數(shù)值為-1；使用方法“[[文本對(duì)象.indexOf（參數(shù)1，參數(shù) 2）]]”。

（4）在元件屬性中，為文本標(biāo)簽“Keyword”設(shè)置【鼠標(biāo)懸?！繒r(shí)的交互樣式為橙色文字與灰色背景。

（5）為文件“Keyword”的【鼠標(biāo)點(diǎn)擊時(shí)】事件添加“case1”，設(shè)置動(dòng)作為【設(shè)置文本】于文本框“KeywordInput”為【元件文字】“當(dāng)前元件”（This）。

Case動(dòng)作設(shè)置見下圖：

（6）單擊檢視面板右上角的頁面圖標(biāo)，或者在概要中單擊頁面名稱，為頁面的【頁面鼠標(biāo)單擊時(shí)】事件添加“case1”，設(shè)置動(dòng)作為【隱藏】組合“keywordGroup”。這個(gè)動(dòng)作同樣要添加在元件“KeyWordGroup”，這個(gè)動(dòng)作同樣要添加在元件“Keyword”【鼠標(biāo)單擊時(shí)】事件的“case1”中。

事件交互設(shè)置見下圖：

好了，到此這篇關(guān)于Axure字符串函數(shù)的應(yīng)用案例分享基本介紹完了，最后提供的是上述案例的原型模板的源文件下載，大家可以結(jié)合本文中的相關(guān)介紹進(jìn)行理解消化。

https://pan.baidu.com/s/1rQOZML4MaDpJac3ZnMYWYw

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

題圖來自 Pixabay，基于 CC0 協(xié)議