Introduction to eolink global search [translation]

Time:2022-7-21

With the separation of front and rear ends becoming the standard mode of Internet project development, API has become a bridge between front and rear ends. In the face of more and more frequent and complex calls, the number of APIs in the project is also increasing. We need to quickly locate the corresponding API through the search function to use it.

Next, we will introduce the global search function of eolink through this article.

|Introduction to eolink global search function

The global search function of eolink supports the use of API management and API automated testing, as shown in Figure 1.


Figure 1

It can complete the search of two environments at the same time, namely:
Search within the project.
Global search.

Next, let’s look atAPI managementWhat is the difference between the global search function and the * * API automated test * * page.

API management and testing

In the context of intra item search (Figure 2) and global search (Figure 3), the displayed search types are different. There will be one more search item type in the context of global search, as shown in the following figure.


Figure 2


Figure 3

API automated testing

In the API automated test page, the search types shown in the project search (Figure 4) and global search (Figure 5) environments are also different from those on the API management and test page. The comparison is shown in the following figure.


Figure 4

Figure 5

|Highlight of global search function – keyboard control

Eolink’s global search supports keyboard control, which allows users to use it completely without the mouse, making the experience very convenient.

***CTRL + F to focus the search box**
***Tab switch search environment**
***Up and down keys control selected items**
***Enter to confirm**
***Backspace key to re-enter keywords**

|Implementation of global search function

Different modules’ global search boxes have different display and search objects, which are judged and controlled by routing and regular expressions.

When the search status is different, the content displayed in the search display box below the search box is also different. The search display box will appear when the search box is focused. Use ngswitch to control the content displayed in the display box.

***Display the search history box when the search box is focused and no search content is entered

  • After a search, a search data of this time will be stored in the local localstorage, and the search history will be obtained from the localstorage.
  • When the search box is focused and the search content is entered, the search element type box is displayed (after clicking a search type, change the search keyword, and the content in the display box will change from search data to search type)
  • After the search box is focused and the search type is clicked, the search data box is displayed**

Interface UI functions are uniformly adopted:
fn_ watch_ UI (inaction:string, inparams:any) to expose. fn_ watch_ The UI function is equivalent to an entry for the page to access the JS function. When a page wants to access a function in JS, it can only access the specified function by triggering an action through this entry.

HTML part example:

JS example:


The above is the introduction of eolink global search and a brief description of its function implementation. Its appearance improves users’ work efficiency and enables users to quickly locate the target content.

The interface management tool used in the figure is eolink. You can use it yourself if you are interested:www.eolink.com

Recommended Today

Start with Hotspot source code from Thread.start

native start0 is traced to the hotspot source code private void native start0(); The principle of native is to call JNI, and the convention of Hotspot source code is, usually one Xxx.java corresponds to one Xxx.c, Here are three examples: Java class Path relative to the OpenJDK source java.lang.Thread jdk/src/share/native/java/lang/Thread.c java.lang.String jdk/src/share/native/java/lang/String.c java.lang.System jdk/src/share/native/java/lang/System.c So […]