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: 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 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'public')

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