1 files changed, 28 insertions, 12 deletions
diff --git a/src/templates/dashboard/searchable_select_multiple.html b/src/templates/dashboard/searchable_select_multiple.html
index c594a27..91ed09c 100644
--- a/src/templates/dashboard/searchable_select_multiple.html
+++ b/src/templates/dashboard/searchable_select_multiple.html
@@ -1,21 +1,21 @@
 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
 
-<div class="autocomplete">
+<div id="search_select_outer" class="autocomplete">
     <div id="warning_pane" style="background: #FFFFFF; color: #CC0000;">
         {% if incompatible == "true" %}
         <h3>Warning: Incompatible Configuration</h3>
         <p>Please make a different selection, as the current config conflicts with the selected pod</p>
         {% endif %}
     </div>
-
-    <div id="added_list">
-
-    </div>
     <div id="added_counter">
         <p id="added_number">0</p>
         <p id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} &infin; {% endif %}added</p>
     </div>
 
+    <div id="added_list">
+
+    </div>
+
     <input id="user_field" name="ignore_this" class="form-control" autocomplete="off" type="text" placeholder="{{placeholder}}" value="" oninput="search(this.value)"
     {% if disabled %} disabled {% endif %}
     >
@@ -34,7 +34,13 @@
             flex: 1;
             position: relative;
             overflow-y: auto;
+            padding-bottom: 10px;
         }
+
+        #added_list {
+            margin-bottom: 5px;
+        }
+
         .autocomplete {
             display: flex;
             flex: 1;
@@ -43,6 +49,9 @@
         #user_field {
             font-size: 14pt;
             padding: 5px;
+            height: 40px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
 
         }
 
@@ -54,12 +63,11 @@
             border: solid 1px #ddd;
             border-top: none;
             border-bottom: none;
-            visibility: hidden;
+            visibility: inherit;
             flex: 1;
 
             position: absolute;
             width: 100%;
-            box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
 
         }
 
@@ -262,7 +270,11 @@
             if( str.length == 1 )
             {
                 new_trie.isComplete = true;
-                new_trie.itemID = id;
+                if( !new_trie.ids )
+                {
+                    new_trie.ids = [];
+                }
+                new_trie.ids.push(id);
             }
             inner_trie = new_trie;
             str = str.substring(1);
@@ -336,7 +348,7 @@
         }
         if ( trie.isComplete )
         {
-            itemIDs.push( trie.itemID );
+            itemIDs.push(...trie.ids);
         }
 
         return itemIDs;
@@ -397,13 +409,15 @@
             drop.appendChild(result_entry);
         }
 
+        var scroll_restrictor = document.getElementById("scroll_restrictor");
+
         if( !drop.firstChild )
         {
-            drop.style.visibility = 'hidden';
+            scroll_restrictor.style.visibility = 'hidden';
         }
         else
         {
-            drop.style.visibility = 'inherit';
+            scroll_restrictor.style.visibility = 'inherit';
         }
     }
 
@@ -419,7 +433,10 @@
             }
         }
         update_selected_list();
+        // clear search bar contents
+        document.getElementById("user_field").value = "";
         document.getElementById("user_field").focus();
+        search("");
     }
 
     function remove_item(item_ref)
@@ -469,5 +486,4 @@
 
         added_list.innerHTML = list_html;
     }
-
 </script>