百度搜索提示是如何實現的?

百度搜索提示是如何實現的?

本案例的講解適用於具有一定的Axure使用基礎的人員,關於工具的操作步驟不做詳細講解。本文講述的重點在於邏輯的梳理以及一些啟發性的思路與方法,希望能夠幫助大家做出更酷炫的交互效果。

01 準備元件

本案例中需要用到的元件有文本框、矩形按鈕和中繼器。文本框用於輸入搜索詞,這裡的類型需要設置為查找;矩形按鈕可以直接從元件庫中拖拽至搜索框右側,並將按鈕中的文字修改為“搜索”;中繼器用來顯示提示詞列表,即根據搜索內容索引出來的列表,這裡需要注意將中繼器轉換為動態面板,因為動態面板可以根據內容自動擴展尺寸,默認隱藏動態面板。

02 交互設置

a 中繼器

這裡主要有兩個交互事件,第一個為中繼器設置每項加載時事件(注意這裡的交互設置的對象是中繼器不是項),目的是為中繼器的項加載內容,在文本設置中將中繼器項的值設置為函數[[Item.Column0]];第二個為中繼器的項設置單擊事件,在文本設置中將搜索框的值設置為項的值,即函數[[this.text]],並隱藏中繼器動態面板。

百度搜索提示是如何實現的?

加載中繼器的項

百度搜索提示是如何實現的?

將項的值傳遞給文本框

b 文本框

為文本框添加一個文本改變事件,當文本框的內容改變時,我們希望達到這樣的效果:顯示中繼器動態面板,移除之前的篩選結果,重新按照新的搜索詞進行索引篩選。這裡需要說明的是添加新的篩選時,需要設定一個條件,即當中繼器數據集中包含搜索的內容時,執行篩選並顯示出來,需要插入這樣一個函數[[TargetItem.Column0.indexOf(LVAR1)>-1]]執行新的篩選。文本改變事件還需要添加另一個用例case2,用例中添加一個條件即如果文本框的內容為空,則執行的動作為隱藏中繼器動態面板,記得將case2切換為if,case2通常默認為else if。

百度搜索提示是如何實現的?

設置文本改變事件

c 搜索按鈕

首先需要想清楚,點擊搜索按鈕後我們希望達到的效果是怎樣的。如果輸入的搜索詞不在中繼器數據集裡面,這時候我們需要在中繼器數據集中添加這一條數據;再次點擊按鈕,首先移除之前的全部篩選, 添加新的篩選,這裡的篩選規則為精確索引。梳理清楚邏輯規則後,下面我們來看下如何設置交互事件。

添加第二個用例case2,動作設置中首先移除全部篩選,然後在添加新篩選中設置篩選條件為[[TargetItem.Column0==LVAR1]]。LVAR1為文本框定義的變量,TargetItem.Column0表達的意思為中繼器數據集Column0這一列數據,這裡的數據包含之前篩選的結果。

百度搜索提示是如何實現的?

搜索按鈕設置單擊事件

篩選結果的數量並不等於數據集項的數量,我們可以做個實驗,添加兩個按鈕,一個顯示篩選結果的數量,一個顯示數據集項的數量。在中繼器項的加載事件中添加兩個動作,設置兩個按鈕的文本值分別為函數[[Item.Repeater.itemCount]]和[[Item.Repeater.dataCount]]。(設置的截圖可參照上文 加載中繼器的項)

03 最後的總結

本案例的源文件鏈接:https://pan.baidu.com/s/1c2rXauc 密碼:h3ta

附:中繼器函數說明

Repeater 用途:中繼器的對象。Item.Repeater即為Item所在的中繼器對象。

visibleItemCount 用途:中繼器項目列表中可見項的數量。比如:項目列表共有15項,分頁顯示為每頁6項。當項目列表在第1、2頁時,可見項數量為6;當項目列表在第3頁時,可見項數量為3。

itemCount 用途:獲取中繼器項目列表的總數量,或者叫加載項數量。默認情況下項目列表的總數量會與中繼器數據集中的數據行數量一致,但是,如果進行了篩選,項目列表的總數量則是篩選後的數量,這個數量不受分頁影響。

dataCount 用途:獲取中繼器數據集中數據行的總數量。

pageCount 用途:獲取中繼器分頁的總數量,即能夠獲取分頁後共有多少頁。

pageIndex 用途:獲取中繼器項目列表當前顯示內容的頁碼。

Item 用途:獲取數據集一行數據的集合,即數據行的對象。

TargetItem 用途:目標數據行的對象。

Item.列名 用途:獲取數據行中指定列的值。

index 用途:獲取數據行的索引編號,編號起始為1,由上至下每行遞增1。

isFirst 用途:判斷數據行是否為第1行;如果是第1行,返回值為“True”,否則為“False”。

isLast 用途:判斷數據行是否為最末行;如果是最末行,返回值為“True”,否則為“False”。

isEven 用途:判斷數據行是否為偶數行;如果是偶數行,返回值為“True”,否則為“False”。

isOdd 用途:判斷數據行是否為奇數行;如果是奇數行,返回值為“True”,否則為“False”。

isMarked 用途:判斷數據行是否為被標記;如果被標記,返回值為“True”,否則為“False”。

isVisible 用途:判斷數據行是否為可見行;如果是可見行,返回值為“True”,否則為“False”。


分享到:


相關文章: