隨著前後端分離成為網際網路專案開發的標準模式， API 成為了前後端聯通的橋樑。而面對越來越頻繁和複雜的呼叫需求，專案裡的 API 數量也越來越多，我們需要通過搜尋功能來快速定位到對應的 API來進行使用。

下面我們會通過這篇文章向大家介紹 Eolink 的全域性搜尋功能。

| Eolink 全域性搜尋功能介紹

Eolink 的全域性搜尋功能支援 API 管理 及 API 自動化測試 兩個模組的使用，如圖1。

圖1

它可以同時完成兩種環境的搜尋，分別是：
專案內搜尋。
全域性搜尋。

接下來，我們看看在 API 管理 和** API 自動化測試** 的頁面中，全域性搜尋功能會有什麼區別。

API 管理與測試

在專案內搜尋（圖2）和全域性搜尋（圖3）環境下，展示的搜尋型別是不一樣的，在全域性搜尋的時候會多一個搜尋專案的型別，對比如下圖。

圖2

圖3

API 自動化測試

在 API 自動化測試頁面當中，專案內搜尋（圖4）和全域性搜尋（圖5）環境所展示的搜尋型別和在 API 管理與測試頁面也是不一樣的，對比如下圖。

圖4

圖5

| 全域性搜尋功能的亮點 - 鍵盤控制

Eolink 的全域性搜尋支援鍵盤控制，使用者可完全脫離滑鼠進行使用，體驗非常方便。

*** Ctrl + F 鍵使搜尋框聚焦**
*** Tab 鍵切換搜尋環境**
*** 上下鍵控制選中項**
*** Enter 鍵確定**
*** Backspace 鍵可重新輸入關鍵字**

| 全域性搜尋功能的實現

不同模組全域性搜尋框有不同的展示和搜尋物件，這些都是通過路由和正則表示式一起去進行判斷和控制的。

搜尋狀態不同時，搜尋框下方的搜尋展示框所展示的內容也是不同的，在搜尋框聚焦的時候才會出現搜尋展示框。使用 ngSwitch 去控制展示框展示的內容。

*** 搜尋框聚焦且沒有輸入搜尋內容時顯示搜尋歷史框

• 進行一次搜尋之後，就會把本次的一個搜尋資料存到本地的 localStorage 中，搜尋歷史記錄就從 localStorage 中獲取。
• 搜尋框聚焦且輸入搜尋內容時顯示搜素型別框（點選某個搜尋型別後，改變搜尋關鍵字，展示框裡面的內容會從搜尋資料變成搜尋型別）
• 搜尋框聚焦且點選搜尋型別之後顯示搜尋資料框**

對接 UI 函式統一採用：
fn_watch_ui(inAction:string,inParams:any) 去進行暴露。fn_watch_ui 函式相當於頁面訪問 js 函式的一個入口。當頁面想訪問 js 中的某個函式，只有通過這個入口，觸發一個動作才會訪問到指定的函式。

html 部分示例：

js 示例：

以上就是對 Eolink 全域性搜尋的介紹以及功能實現的簡要描述。它的出現提高了使用者的工作效率，讓使用者快速定位到目標內容。

圖中所使用的的介面管理工具是eolink，感興趣可以自行使用：www.eolink.com