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

@@ -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>

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