Как включить меню поиска, чтобы быстро найти слово или фразу в приложении в Electron Framework

По умолчанию в любом здравомыслящем браузере вы можете найти или найти определенное слово или фразу на веб-странице, просматривая с помощью простой процедуры. Вы увидите, что панель поиска полезна для быстрого поиска и автоматически исчезнет через некоторое время. Если вы работаете над своим электронным проектом и сгенерированный контент может быть очень обширным, вы можете сохранить проблему для своего пользователя и реализовать функцию поиска в приложении.

В этой статье мы покажем вам, как создать функцию поиска на странице в вашем электронном приложении.

1. Установите Электрон в поиске страниц

Модуль поиска на странице в электронном виде обеспечивает встроенную в Chrome функцию поиска в приложениях Electron. Electron представляет собственный API Chrome для JavaScript. Но у нативного API поиска внутри страницы есть некоторые подводные камни и состояния. Таким образом, этот пакет оборачивает его и предоставляет более простые API-интерфейсы без ошибок.

Чтобы установить его в свой проект, выполните следующую команду в своем терминале:

npm i electron-in-page-search

Поиск по странице может использоваться для окна браузера или веб-просмотра (например, BrowserWindow или тег) в приложении Электрон. Вы можете использовать только одну функцию для них обоих в процессе рендеринга. Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь.

2. Включить в меню поиска

Меню может быть включено в процессе рендеринга с помощью следующего кода. Вам нужно использовать функцию по умолчанию модуля поиска электронов на странице, и вам нужен удаленный модуль электронов. Инициализировать searchInPage функция, предоставляющая в качестве первого аргумента содержимое окна, и этого будет достаточно. Вы можете открыть меню, используя метод openSearchWindow:

// Retrieve the electron in page search module
const searchInPage = require('electron-in-page-search').default;
const remote = require('electron').remote;
// or
// import searchInPage from 'electron-in-page-search';
// Create an instance with the current window
const inPageSearch = searchInPage(remote.getCurrentWebContents());
// Display the search menu
inPageSearch.openSearchWindow();

Далее вам нужно будет включить CSS в меню поиска. Это очень полезно, так как вы можете изменить меню так, как вы хотите, чтобы оно соответствовало стилю вашего приложения. Кроме того, он может быть расположен где угодно, потому что вы можете обрабатывать его как любой элемент DOM.

В этом примере мы собираемся сделать его похожим на элемент меню поиска по умолчанию в браузере Chrome:

/*
* .electron-in-page-search-window is a class specified to default
*  element for search window.
*/
.electron-in-page-search-window {
position: fixed;
top: 0;
right: 0;
border: solid grey 1px;
background-color: white;
width: 300px;
height: 36px;
}
/*
* .search-inactive is added to search window  when the window
* is inactive.
*/
.search-inactive {
visibility: hidden;
}
/*
* .search-inactive is added to search window  when the window
* is active.
*/
.search-active {
visibility: visible;
}

Как только стиль и код инициализации были помещены в ваше приложение, вы готовы запустить приложение и использовать меню поиска, выполнив npm start,

3. Пример

В следующем примере показано минимальное электронное приложение, которое отображает меню поиска в том же стиле браузера Chrome:

Hello World!
/*
* .electron-in-page-search-window is a class specified to default
*  element for search window.
*/
.electron-in-page-search-window {
position: fixed;
top: 0;
right: 0;
border: solid grey 1px;
background-color: white;
width: 300px;
height: 36px;
}
/*
* .search-inactive is added to search window  when the window
* is inactive.
*/
.search-inactive {
visibility: hidden;
}
/*
* .search-inactive is added to search window  when the window
* is active.
*/
.search-active {
visibility: visible;
}
Hello World!
Hello, some demo text.
Click on the following button to search for text on the document.

Text example. Try to find "esternocleidomastoideo" in the document and the word will be highlighted in the same way as the browser.

// Retrieve the electron in page search module
const searchInPage = require('electron-in-page-search').default;
const remote = require('electron').remote;
// or
// import searchInPage from 'electron-in-page-search';
// Create an instance with the current window
const inPageSearch = searchInPage(remote.getCurrentWebContents());
// Attach an event listener to open the search menu
document.getElementById('trigger-search').addEventListener('click', () => {
inPageSearch.openSearchWindow();
});
// Alternatively add the key event listener [CTRL+F]
window.addEventListener("keydown", (e) => {
if ((e.ctrlKey || e.metaKey) && e.keyCode === 70) {
inPageSearch.openSearchWindow();
}
}, false);

Шаблон сгенерирует окно, показанное на изображении статьи.