make the select input searchable

ecsspawner/form_template.html

@@ -1,10 +1,15 @@
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
+
 <script>
     instance_details = $instance_json;
     regions = $regions;
     available_instances = {};
     tbl_header = ["Type", "vCPU", "Memory", "Arch", "GPU"]
-
-
+    // I have no idea what i'm doing 
+    require.config({
+        paths: { bootstrapselect: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min' }
+    });
+    requirejs(['jquery', 'bootstrapselect'], function ($$) {
     function displayInstanceDetails() {
         instance_type = document.getElementById("instance").value;
         var tbl = document.createElement('table');
@@ -41,12 +46,14 @@
 
     function genRegionSelect() {
         var region_select = document.getElementById('region');
+        console.log("in genregionselect")
         for (var i = 0; i < regions.length; i++) {
             var opt = document.createElement('option');
             opt.value = regions[i];
             opt.innerHTML = regions[i];
             region_select.appendChild(opt);
         }
+        $$('#region').selectpicker('refresh');
     }
 
     function updateAvailableInstances() {
@@ -61,22 +68,26 @@
             opt.innerHTML = keys[i];
             select.appendChild(opt);
         }
+        $$('#instance').selectpicker('refresh');
     }
 
-    window.addEventListener("load",function(){
+    $$('#region').change(updateAvailableInstances);
+    $$('#instance').change(displayInstanceDetails);
+
+    $$(document).ready(function() {
         genRegionSelect();
         updateAvailableInstances();
         displayInstanceDetails();
-    },false);
-    
+    });
+});
 </script>
 
     <div class="form-group">
         <label for="region">Region</label>
-        <select class="form-select" id="region" name="region" onchange="updateAvailableInstances()"></select>
+        <select id="region"  data-live-search="true" name="region" class="selectpicker form-select"></select>
         <br />
         <label for="instance">Instance type</label>
-        <select class="form-select" onchange=displayInstanceDetails() name="instance" id="instance">
+        <select class="selectpicker form-select"  data-live-search="true" name="instance" id="instance">
         </select>
         <br />
         <label for="spot">Spot instance</label>
@@ -92,7 +103,7 @@ <h4 class="panel-title">
                   </a>
                 </h4>
               </div>
-              <div id="advancedConfig" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
+              <div id="advancedConfig" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                 <div class="panel-body">
                     <label for="image">Docker Image</label>
                     <input type="text" id="image" name="image">