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.

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>

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);
     }
 }