Merge pull request #1292 from burningmantech/2024-10-02-datalist-add-…

…rangers feat: use text+datalist for "Add Ranger", rather than select
burningmantech · Oct 9, 2024 · f1ba90b · f1ba90b
2 parents c0fb13b + c23348c
commit f1ba90b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git 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
@@ -547,16 +547,16 @@ function drawRangers() {
 
 
 function drawRangersToAdd() {
-    var select = $("#ranger_add");
+    var datalist = $("#ranger_handles");
 
     var handles = [];
     for (var handle in personnel) {
         handles.push(handle);
     }
     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);
     }
 }
 
@@ -1004,6 +1004,12 @@ function addRanger() {
         return;
     }
 
+    if (!(handle in personnel)) {
+        // Not a valid handle
+        select.val("");
+        return;
+    }
+
     handles.push(handle);
 
     function ok() {