中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：“高亮”即特定字段在搜索結果中高亮顯示，簡單來說就是讓該文本與其他普通文本有所區別。那么如何用中繼器制作高亮搜索結果呢？一起來看一下吧。

高亮其實就是Highlight，即特定字段在搜索結果中高亮顯示。顯示方式又很多，例如，字體加粗或者字體變紅……簡單來說就是和其他普通文本有所區別。

今天作者就教大家怎么用中繼器制作一個既方便使用，同時又具備高保真效果高亮搜索框的原型模板，具體效果如下圖所示，簡單來說就是可以模糊搜索中繼器內數據的同時，將對應搜索文字的文本變紅。

原型預覽地址：https://ds0b48.axshare.com/#g=1

那下面我們一起開始制作吧。

一、原理介紹

首先我們講一下怎么講一段內容里的某段文字變紅的原理，主要用到文本切割的方法，總共用到三個函數：

1. length函數，可以得出搜索文本的長度
2. indexof，可以計算出搜索文本在原來文本的第幾位
3. slice，可以截取文本的一部分
   簡單來說其實就是分成三段，開始到搜索文本之前，搜索文本，搜索文本后面的文本，用設置富文本的交互就可以將中間那段變成紅色即可。

例如整段文本為Axure高保真原型，搜索內容為高保真，那我們通過length函數獲取到高保真的長度為3，在整段文本(Axure高保真原型)中是第5位，這里需要注意indexof函數是從0開始的，我們看到的第一位實際是第0位，第二位就是第一位。

然后我們就用slice函數來分隔，首先取得獲取高保真前面的內容Axure，這是第一段；第二段就是輸入框里面的內容——高保真；最后一段就是搜索文字后面的內容——原型，其實就是搜索文字所在位置+長度后面的內容。

二、材料準備

材料包括中繼器、輸入框、文本標簽、、搜索按鈕、矩形、外框等等，下面我們一個個展開介紹。

1. 中繼器

中繼器是最重要的材料，因為只有通過中繼器才可以實現模糊搜索。

中繼器內部表格我們需要2列：

1. Column0：在里面填寫顯示的選項或者說推薦內容、歷史記錄
2. Column1：這里填寫一般不會搜索到的文本即可，只用于后續邏輯處理

2. 中繼器內部元件

以下所有元件都是放在中繼器內部：

• 文字矩形（中繼器內部自帶的矩形），命名為新文本，這里我們改一下樣式即可，也可以像案例一樣增加移入變色的效果。
• 文本標簽，命名為搜索文字，默認隱藏，只用于邏輯交互。
• 文本標簽，命名為全部文字，默認隱藏，只用于邏輯交互。
• 文本標簽，命名為記錄文本位置，默認隱藏，只用于邏輯交互，默認值為0，用于記錄搜索文字在整個文本中的位置。
• 文本標簽，命名為記錄文本長度，默認隱藏，只用于邏輯交互，默認值為0，用于記錄搜索文字的長度。

3. 搜索元件

搜索元件有輸入框、搜索按鈕和背景矩形，具體樣式可以自己設置，如下圖所示：

4. 彈出組合

彈出組合其實就是上面的中繼器和一個背景矩形組成，彈出組合默認隱藏即可。

三、交互制作

1. 中繼器每項加載時交互

首先是用設置文本的交互，將Column0的值設置到全部文字的元件，將Column1的值設置到搜索文字的元件。然后觸發搜索文字單擊時的交互。

這里有些電腦速度比較慢的話，可能會有一個bug就是還沒設置完文本就先觸發了事件，如果出現這種情況的話可以在設置文本和觸發事件之間建一個等待10ms的交互。

2. 搜索文字鼠標單擊時

搜索文字鼠標單擊的交互，實際就是將全部文本轉化成富文本的一個交互，然后將富文本設置到新文本內。

首先我們也是要用設置文本的交互，記錄搜索文本的長度，以及搜索文本在全部文本里面的位置。

然后根據他的文字，在分情況討論。

3. 搜索文字鼠標雙擊時

因為上面分了情況，所以要用觸發事件觸發到雙擊再繼續寫條件。

第一種條件是記錄文本位置的值>=0,換句話說就是搜索到結果，那我們設置新文本的值為富文本，分成三段，具體邏輯可以看第一大點的思路，第一段就是全部文字的slice（0，記錄文本的位置），這段就是搜索文字前的文本；第二段就直接是搜索文字，這里把它設置為紅色即可，最后一段就是slice（記錄文本的位置+記錄文本長度），即搜索文字后面的內容。

如果第一種情況不成立，即記錄文本位置的值小于0，那我們直接設置新文本的值為中繼器內Column0的值即可，就是沒有找到對應的文本，所以不需要做變色處理。

4. 文本框文字改變時

這里也是分兩種情況：第一種是文本框內的文字不為空，即有輸入內容。

我們就標記全部行，然后更新全部航的column1列，將輸入框的值設置進去，這里相當于將輸入框的值傳進去。然后中繼器會自動重新加載，相同的文字就會根據上面的交互變紅。

然后我們在用篩選事件，對column0列篩選，篩選出對應的行內容，這里我們用到indexof的函數，如果結果>-1，即該行有對應的內容。

第二種情況就是文本框的值為控制，即沒有搜索內容，這里其實我們移除中繼器篩選就可以了。

但是我們同樣也要標記全部行，然后更新全部行里面的column1的列，因為這列代表搜索內容，我們將它填寫一串打亂的字符即可，放置誤搜索。

5. 文本框獲取焦點和失去焦點時

其實這里很簡單，就是獲取焦點是顯示彈出彈窗，這里選擇燈箱效果和置頂；失去焦點時隱藏彈窗組合即可。

6. 后續可增加的一些交互

其實做到第五步就完成了這個原型，后續試一下更加美化，例如移入輸入框變色，獲取焦點又變成另一種顏色，這些都是可以根據自己的喜好增加的?；蛘哌€有一些，例如點擊搜索按鈕或者點擊內容跳轉到對應的頁面或者對其他中繼器進行篩選，這些都可以根據自身需要增加。

做好以后，當我們再次使用時，只需要在中繼器的表格里填寫選項即可，自動生成交互效果，是不是很方便呢？

那以上就是本期的全部內容了，感謝您的閱讀，我們下期見~88

本文由 @做產品但不是經理 原創發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協議