From c31047ccd6f57525485773cf57c3e97f42fe5aeb Mon Sep 17 00:00:00 2001
From: David Skoland <davidskoland@gmail.com>
Date: Thu, 21 Dec 2023 01:09:59 +0100
Subject: [PATCH] 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.
---
 public/client.html                  | 10 ++++++----
 webAO/client/handleCharacterInfo.ts |  6 +++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/public/client.html b/public/client.html
index 79e30800..b22771de 100644
--- a/public/client.html
+++ b/public/client.html
@@ -67,9 +67,10 @@ <h1 id="client_loadingtext">Loading</h1>
 			<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 @@ <h1 id="client_errortext">You were disconnected from the server.</h1>
 							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 9d74a8bc..72dd727a 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
+}