2023年Axure教程-通訊錄搜索案例（字母定位+模糊搜索）

Axure教程——通訊錄搜索案例（字母定位+模糊搜索）在移動端APP里字母定位和模糊搜尋是常用的快速找到對應內(nèi)容的方式，今日就以移動端通訊錄為案例，教大家如何在Axure中實現(xiàn)字母定位+模糊搜尋的交互效果：

原型地址：https://3

本案例教程主要使用中繼器來制作人物列表，所以制作完成后再次使用也特別便利，我們在中繼器表格里填寫對應的信息既可以自動生成交互效果，所以推舉給大家使用，下面我們就一起開頭學習制作吧~

一、人物信息列表的制作

我們用到中繼器，在中繼西放置一個底部白色底部矩形、一個圖片元件（對應人物頭像）、一個文本標簽（對應人物名稱），如下圖所示擺放即可：

在中繼器表格里，我們插入對應的兩列，分別是name（對應人物名稱）和picture（對應人物頭像），我們在中繼器表格里填寫好名稱，和導入對應的頭像圖片：

在中繼器每項加載時設置交互，用設置文本的交互，將表格中name列的值設置到文本標簽里，然后在用設置圖片的交互，將表格中picture里的圖片，設置到圖片元件里。

二、模糊搜尋效果的制作

我們需要一個輸入框，搜尋按鈕，取消按鈕，背景矩形，搜尋背景矩形，如下圖所示擺放：

由于移動端一般不需要點搜尋按鈕，所以我們把篩選的交互寫在輸入框文本轉(zhuǎn)變時，我們用添加篩選的交互，對中繼器進行篩選，這里需要用到indexof函數(shù)，TargetI.indexOf(this.text)，看看當前文本框輸入的值是是否包含在中繼器表格name列的值里，假如包含在里面，得出的結果就會大于-1，所以我們篩選的條件就是要篩選出大于-1的行。

上面這里是最基礎的模糊搜尋，假如需要考慮大小寫的關系，例如名稱是cat，上面的方式輸入CAT是搜尋不到的，假如想實現(xiàn)不分大小寫搜尋的話，toUpperCase函數(shù)，這個函數(shù)是可以將對應的值全部轉(zhuǎn)為大寫，我們可以用這個函數(shù)將name列的值以及輸入框里的值都轉(zhuǎn)化為大寫，這樣就可以做出不區(qū)分大小寫的模糊搜尋的交互了

這里考慮到?jīng)]有搜尋出效果的狀況，所以我們在中繼器第一行的位置增加文本標簽（沒有文字），至于底層就可以了，剛好用中繼器攔住，假如一行結果都沒有消失的話就會看到這個提示文字，假如有數(shù)據(jù)消失，數(shù)據(jù)就會把它攔住。

假如搜尋框要至于頂層的效果的話，我們就將中繼器和上面的提示文字轉(zhuǎn)為動態(tài)面板，然后調(diào)出垂直滾動條，或者將搜尋區(qū)域的元件轉(zhuǎn)為動態(tài)面板，固定的左上角。

這樣之后我們把全部元件組合轉(zhuǎn)為動態(tài)面板，狀態(tài)命名為搜尋頁，再新增一個state，放在最上面，命名為通訊錄，我們在上面做字母定位的效果

所以取消按鈕點擊時，我們?nèi)∠褜ずY選，這里用設置文本的交互，將輸入框的值設置為空即可，然后用設置面板狀態(tài)的交互，將這個動態(tài)面板設置到通訊錄的狀態(tài)。

三、通訊錄頁面的設置

主要是錨點矩形和中繼器、搜尋圖標以及A-Z和#號的文字，如下圖所示擺放：

上面的通訊錄、搜尋圖片和背景矩形可以轉(zhuǎn)為動態(tài)面板固定在左上角的位置。

鼠標點擊搜尋按鈕，我們用設置面板狀態(tài)的交互，設置整個動態(tài)面板跳轉(zhuǎn)到搜尋頁，就是上面的內(nèi)容了。

下面的部分我們要先用矩形做ABCD……的錨點，然后可以復制前面做好的中繼器過來，將他根據(jù)內(nèi)容分開，放置到對應錨點的下方。

將他們一一擺放到對應位置后，我們添加A-Z和#號，將他們轉(zhuǎn)為動態(tài)面板，固定到右側對應的位置。

鼠標單擊A字母時，我們用滾動到元件的交互，設置錨點位于矩形A,增加一個線性的動畫效果。

鼠標單擊B字母時，我們用滾動到元件的交互，設置錨點位于矩形B，增加一個線性的動畫效果。

鼠標單擊C字母時，我們用滾動到元件的交互，設置錨點位于矩形C，增加一個線性的動畫效果。

……

鼠標單擊Z字母時，我們用滾動到元件的交互，設置錨點位于矩形Z，增加一個線性的動畫效果。

鼠標單擊#號時，我們用滾動到元件的交互，設置錨點位于矩形#，增加一個線性的動畫效果。

我們就完成字母定位的效果了。

這樣我們就完成高保真通訊錄原型模板的制作了，以后