In-page search

[kordwarshuis]

Adds an "instant search" or "dynamic search" (results while you type). Matches are highlighted. Autoscroll to the first match.

[kordwarshuis]

See demo: https://dwarshuis.com/test/spec-up-search/

[kordwarshuis]

Hi, could you maybe take a look at this? I made this for the Trust over IP (ToIP) organisation and Henk van Cann. Would be great if it could be integrated.

[csuwildcat]

Will pull in and test this week.

[kordwarshuis]

Thanks!

[csuwildcat]

Just looked at the demo and have a bit of feedback:

• The search bar in the top header appears to break the layout in mobile, because it causes the header content to extend horizontally. We'd need this to look/render well on mobile before pulling it in.
• When you add the highlighting of matched string segments to the page, I would prefer if we could do so in a way that does not cause layout shift. I would advise the following:
  • Set the wrapping spans to display: inline-block, position: relative;, and remove all margin/padding that causes layout shift.
  • Use a CSS ::before pseudo element in the span set to position: absolute and z-index it at -1, which will let you style more freely without causing layout shift.
  • You'll need to add position: relative, z-index: 0 to the element to enable those absolutely positioned pseudo elements to have a -1 index and show through the layer.
• It would be nice to have arrows to jump to the next/previous match

[kordwarshuis]

Good suggestions, I will implement them.

[kordwarshuis]

• I think the search bar is responsive now and on smaller screens moves to below. I am not sure if it is ok that it takes extra space on mobile default?
• I used the “outline” property to avoid lay out shift. If you don't like the behaviour of the fade in and fade out of outline border on active match, I can change it.
• I added arrows, and also key bindings (right and left arrow keys) for going through search matches.
• Search input gets focus after 1 sec.

Please let me know if this is ok?

[kordwarshuis]

Demo: https://dwarshuis.com/test/spec-up-search/