随着前后端分离成为互联网项目开发的标准模式， 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