Here is a complete search-text function and it's corresponding UI for Sciter engine, as we see in modern browsers. This implementation uses the ::mark(…) feature to highlight the blocks of text, which makes things much easier, otherwise I would need to enclose the occurrence in
<span>'s tags, something with many side effects since you would be modifying the DOM. This makes me wonder, how do you implement such thing in modern browsers?
This is the exact implementation which will appear in the upcoming version Omni to let you search in the docs pages.
Keyboard shortcuts supported:
- Ctrl + F: opens the #search-box and selects the input text
- F3: search next
- Shift + F3: search previous
- ESC: closes the #search-box
- I don't know why but, for
position: fixedto work for an element, you need to set
overflow: auto;for the
<body>tag; that was essential to make #search-box stay fixed