Improve active-search example by not using chrome-only event "search"

[MikeMoolenaar]

Fixes #1569
Fixes #2126

Description

The active search example uses the chrome-only event "search" which is not supported in Safari and Firefox. This PR solves that by using the keyup[key=='Enter'] trigger.

I also fixed #2126 so it won't show an empty table on load, it now shows all data initially. I think this better reflects how a real table search would work, but please let me know if you don't agree with that change and I'll remove the load trigger.

Corresponding issue: #1569 #2126

Testing

Tested on latest the latest version of Firefox and Chromium.

Checklist

• I have read the contribution guidelines
• I have targeted this PR against the correct branch (master for website changes, dev for
  source changes)
• This is either a bugfix, a documentation update, or a new feature that has been explicitly
  approved via an issue
• I ran the test suite locally (npm run test) and verified that it succeeded

[Telroshan]

The search input type is supported even by IE11, why change it to a simple text input here?

The search event on the other hand is indeed non standard and you're right about adding a keyup trigger, though shouldn't we use both events here, as even though it's non standard, it provides a better UX on the browsers that support it?

[MikeMoolenaar]

The search input type is supported even by IE11, why change it to a simple text input here?

You are right, I mistakenly thought it wasn't supported on other browsers than Chrome. I've restored the input to "search".

houldn't we use both events here, as even though it's non standard, it provides a better UX on the browsers that support it?

Honestly, I don't know about the advantages of adding the search event here. I've tested on Chrome without the search event and the requests still gets sent when clearing the input by pressing Escape. Also, the input works on Android by pressing the search button on the keybaord (it just send the keyup event with Enter code).

[alexpetros]

shouldn't we use both events here, as even though it's non standard, it provides a better UX on the browsers that support it?

The purpose of this page is to showcase how htmx works for simple, common use-cases, so using browser-specific features is almost categorically out of scope. It's much more important that the examples work everywhere; when people identify that they don't, we always fix it.