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 | |
| 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.
| -rw-r--r-- | public/client.html | 10 | ||||
| -rw-r--r-- | webAO/client/handleCharacterInfo.ts | 6 |
2 files changed, 9 insertions, 7 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> diff --git a/webAO/client/handleCharacterInfo.ts b/webAO/client/handleCharacterInfo.ts index 9d74a8b..72dd727 100644 --- a/webAO/client/handleCharacterInfo.ts +++ b/webAO/client/handleCharacterInfo.ts @@ -51,10 +51,10 @@ export const handleCharacterInfo = async (chargs: string[], charid: number) => { document.getElementById("mute_select") ); mute_select.add(new Option(safeTags(chargs[0]), String(charid))); - const pair_select = <HTMLSelectElement>( + const pair_select = <HTMLDataListElement>( document.getElementById("pair_select") ); - pair_select.add(new Option(safeTags(chargs[0]), String(charid))); + pair_select.appendChild(new Option(safeTags(chargs[0]), String(charid))); // sometimes ini files lack important settings const default_options = { @@ -102,4 +102,4 @@ export const handleCharacterInfo = async (chargs: string[], charid: number) => { console.warn(`missing charid ${charid}`); img.style.display = "none"; } -}
\ No newline at end of file +} |