diff options
| author | David Skoland <davidskoland@gmail.com> | 2023-12-21 01:09:59 +0100 |
|---|---|---|
| committer | David Skoland <davidskoland@gmail.com> | 2023-12-21 01:20:42 +0100 |
| commit | c31047ccd6f57525485773cf57c3e97f42fe5aeb (patch) | |
| tree | a2c1eaa7a78cd6bbd44db08e9e5f44db83baf582 /public | |
| parent | 43074242c8278af037fb04f7a8dee7f7521272ce (diff) | |
Use datalist in pairing to make it searchable
By using data list instead of select, we can easily make it
searchable and render a platform-native dropdown which
filters options based on the search.
This makes finding your pairing partner much easier,
especially in servers with many characters.
Diffstat (limited to 'public')
| -rw-r--r-- | public/client.html | 10 |
1 files changed, 6 insertions, 4 deletions
diff --git a/public/client.html b/public/client.html index 79e3080..b22771d 100644 --- a/public/client.html +++ b/public/client.html @@ -67,9 +67,10 @@ <center> <p>You seem to be new 👋</p> <form method="POST"> - <div class="h-captcha" data-sitekey="6cbe7d73-706d-4e4b-9147-8b9aebb83b5d" data-theme="dark" data-callback="hcallback"></div> + <div class="h-captcha" data-sitekey="6cbe7d73-706d-4e4b-9147-8b9aebb83b5d" data-theme="dark" + data-callback="hcallback"></div> <script src="https://js.hcaptcha.com/1/api.js" async defer></script> - </form> + </form> </center> </div> <div id="client_charselect"> @@ -248,9 +249,10 @@ onclick="toggleElement('pairing_settings')">Pairing</button> <span id="pairing_settings" style="display: none"> <label for="pair_select">Pairing partner:</label> - <select name="pair_select" id="pair_select"> + <input list="pair_select" placeholder="Search..."> + <datalist name="pair_select" id="pair_select"> <option value="-1">None</option> - </select> + </datalist> <table style="border: none;margin-left: auto;margin-right: auto;"> <tr> <td> |