Merge pull request #212 from Troid-Tech/searchable-pairing-partner

Use datalist in pairing to make it searchable
AttorneyOnline · Dec 21, 2023 · 965e3e9 · 965e3e9
2 parents b288429 + c31047c
commit 965e3e9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git 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
@@ -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";
     }
-}
+}