From 2ecb93bff5dc368e45c707455ed711abd84900df Mon Sep 17 00:00:00 2001
From: Sean Abraham <seanabraham@gmail.com>
Date: Wed, 2 Oct 2024 09:55:35 -0400
Subject: [PATCH] feat: use text+datalist for "Add Ranger", rather than select

This makes it a lot simpler to add Rangers than with the huge
select dropdown of before.
---
 .../element/incident/incident_template/template.xhtml    | 9 ++++++---
 src/ims/element/static/incident.js                       | 8 ++++----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/ims/element/incident/incident_template/template.xhtml b/src/ims/element/incident/incident_template/template.xhtml
index a042984b3..9801d27a5 100644
--- a/src/ims/element/incident/incident_template/template.xhtml
+++ b/src/ims/element/incident/incident_template/template.xhtml
@@ -73,13 +73,16 @@
         </ul>
         <div>
           <label class="control-label">Add:</label>
-          <select
+          <input
+            type="text"
             id="ranger_add"
+            list="ranger_handles"
             class="form-control input-sm auto-width"
             onchange="addRanger()"
-          >
+          />
+          <datalist id="ranger_handles">
             <option value="" />
-          </select>
+          </datalist>
         </div>
       </div>
     </div>
diff --git a/src/ims/element/static/incident.js b/src/ims/element/static/incident.js
index 2d3b6c4a2..1526819e7 100644
--- a/src/ims/element/static/incident.js
+++ b/src/ims/element/static/incident.js
@@ -547,7 +547,7 @@ function drawRangers() {
 
 
 function drawRangersToAdd() {
-    var select = $("#ranger_add");
+    var datalist = $("#ranger_handles");
 
     var handles = [];
     for (var handle in personnel) {
@@ -555,8 +555,8 @@ function drawRangersToAdd() {
     }
     handles.sort((a, b) => a.localeCompare(b));
 
-    select.empty();
-    select.append($("<option />"));
+    datalist.empty();
+    datalist.append($("<option />"));
 
     for (var i in handles) {
         var handle = handles[i];
@@ -566,7 +566,7 @@ function drawRangersToAdd() {
         option.val(handle);
         option.text(rangerAsString(ranger));
 
-        select.append(option);
+        datalist.append(option);
     }
 }