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.

1 files changed, 3 insertions, 3 deletions

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
+}