Replace bootstrap-select with selectize

selectize-bootstrap4-theme v2.0.2 from
https://github.com/const-se/selectize-bootstrap4-theme

To use selectize on a Select or MultiSelect field, add the
selectize-default class. It initializes selectize with the default
options.

JIRA INFRA-644 #action In Progress

app/static/css/bootstrap-select.min.css

-/*!
- * Bootstrap-select v1.13.1 (https://developer.snapappointments.com/bootstrap-select)
- *
- * Copyright 2012-2018 SnapAppointments, LLC
- * Licensed under MIT (https://github.com/snapappointments/bootstrap-select/blob/master/LICENSE)
- */.bootstrap-select>select.bs-select-hidden,select.bs-select-hidden,select.selectpicker{display:none!important}.bootstrap-select{width:220px\9}.bootstrap-select>.dropdown-toggle{position:relative;width:100%;z-index:1;text-align:right;white-space:nowrap}.bootstrap-select>.dropdown-toggle.bs-placeholder,.bootstrap-select>.dropdown-toggle.bs-placeholder:active,.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder:hover{color:#999}.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success:hover{color:rgba(255,255,255,.5)}.bootstrap-select>select{position:absolute!important;bottom:0;left:50%;display:block!important;width:.5px!important;height:100%!important;padding:0!important;opacity:0!important;border:none}.bootstrap-select>select.mobile-device{top:0;left:0;display:block!important;width:100%!important;z-index:2}.bootstrap-select.is-invalid .dropdown-toggle,.error .bootstrap-select .dropdown-toggle,.has-error .bootstrap-select .dropdown-toggle,.was-validated .bootstrap-select .selectpicker:invalid+.dropdown-toggle{border-color:#b94a48}.bootstrap-select.is-valid .dropdown-toggle,.was-validated .bootstrap-select .selectpicker:valid+.dropdown-toggle{border-color:#28a745}.bootstrap-select.fit-width{width:auto!important}.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){width:220px}.bootstrap-select .dropdown-toggle:focus{outline:thin dotted #333!important;outline:5px auto -webkit-focus-ring-color!important;outline-offset:-2px}.bootstrap-select.form-control{margin-bottom:0;padding:0;border:none}:not(.input-group)>.bootstrap-select.form-control:not([class*=col-]){width:100%}.bootstrap-select.form-control.input-group-btn{z-index:auto}.bootstrap-select.form-control.input-group-btn:not(:first-child):not(:last-child)>.btn{border-radius:0}.bootstrap-select:not(.input-group-btn),.bootstrap-select[class*=col-]{float:none;display:inline-block;margin-left:0}.bootstrap-select.dropdown-menu-right,.bootstrap-select[class*=col-].dropdown-menu-right,.row .bootstrap-select[class*=col-].dropdown-menu-right{float:right}.form-group .bootstrap-select,.form-horizontal .bootstrap-select,.form-inline .bootstrap-select{margin-bottom:0}.form-group-lg .bootstrap-select.form-control,.form-group-sm .bootstrap-select.form-control{padding:0}.form-group-lg .bootstrap-select.form-control .dropdown-toggle,.form-group-sm .bootstrap-select.form-control .dropdown-toggle{height:100%;font-size:inherit;line-height:inherit;border-radius:inherit}.bootstrap-select.form-control-lg .dropdown-toggle,.bootstrap-select.form-control-sm .dropdown-toggle{font-size:inherit;line-height:inherit;border-radius:inherit}.bootstrap-select.form-control-sm .dropdown-toggle{padding:.25rem .5rem}.bootstrap-select.form-control-lg .dropdown-toggle{padding:.5rem 1rem}.form-inline .bootstrap-select .form-control{width:100%}.bootstrap-select.disabled,.bootstrap-select>.disabled{cursor:not-allowed}.bootstrap-select.disabled:focus,.bootstrap-select>.disabled:focus{outline:0!important}.bootstrap-select.bs-container{position:absolute;top:0;left:0;height:0!important;padding:0!important}.bootstrap-select.bs-container .dropdown-menu{z-index:1060}.bootstrap-select .dropdown-toggle:before{content:'';display:inline-block}.bootstrap-select .dropdown-toggle .filter-option{position:absolute;top:0;left:0;padding-top:inherit;padding-right:inherit;padding-bottom:inherit;padding-left:inherit;height:100%;width:100%;text-align:left}.bootstrap-select .dropdown-toggle .filter-option-inner{padding-right:inherit}.bootstrap-select .dropdown-toggle .filter-option-inner-inner{overflow:hidden}.bootstrap-select .dropdown-toggle .caret{position:absolute;top:50%;right:12px;margin-top:-2px;vertical-align:middle}.input-group .bootstrap-select.form-control .dropdown-toggle{border-radius:inherit}.bootstrap-select[class*=col-] .dropdown-toggle{width:100%}.bootstrap-select .dropdown-menu{min-width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-select .dropdown-menu>.inner:focus{outline:0!important}.bootstrap-select .dropdown-menu.inner{position:static;float:none;border:0;padding:0;margin:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none}.bootstrap-select .dropdown-menu li{position:relative}.bootstrap-select .dropdown-menu li.active small{color:#fff}.bootstrap-select .dropdown-menu li.disabled a{cursor:not-allowed}.bootstrap-select .dropdown-menu li a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bootstrap-select .dropdown-menu li a.opt{position:relative;padding-left:2.25em}.bootstrap-select .dropdown-menu li a span.check-mark{display:none}.bootstrap-select .dropdown-menu li a span.text{display:inline-block}.bootstrap-select .dropdown-menu li small{padding-left:.5em}.bootstrap-select .dropdown-menu .notify{position:absolute;bottom:5px;width:96%;margin:0 2%;min-height:26px;padding:3px 5px;background:#f5f5f5;border:1px solid #e3e3e3;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05);pointer-events:none;opacity:.9;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-select .no-results{padding:3px;background:#f5f5f5;margin:0 5px;white-space:nowrap}.bootstrap-select.fit-width .dropdown-toggle .filter-option{position:static;display:inline;padding:0}.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner,.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner-inner{display:inline}.bootstrap-select.fit-width .dropdown-toggle .caret{position:static;top:auto;margin-top:-1px}.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark{position:absolute;display:inline-block;right:15px;top:5px}.bootstrap-select.show-tick .dropdown-menu li a span.text{margin-right:34px}.bootstrap-select .bs-ok-default:after{content:'';display:block;width:.5em;height:1em;border-style:solid;border-width:0 .26em .26em 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.bootstrap-select.show-menu-arrow.open>.dropdown-toggle,.bootstrap-select.show-menu-arrow.show>.dropdown-toggle{z-index:1061}.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:before{content:'';border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid rgba(204,204,204,.2);position:absolute;bottom:-4px;left:9px;display:none}.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:after{content:'';border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;bottom:-4px;left:10px;display:none}.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:before{bottom:auto;top:-4px;border-top:7px solid rgba(204,204,204,.2);border-bottom:0}.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:after{bottom:auto;top:-4px;border-top:6px solid #fff;border-bottom:0}.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:before{right:12px;left:auto}.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:after{right:13px;left:auto}.bootstrap-select.show-menu-arrow.open>.dropdown-toggle .filter-option:after,.bootstrap-select.show-menu-arrow.open>.dropdown-toggle .filter-option:before,.bootstrap-select.show-menu-arrow.show>.dropdown-toggle .filter-option:after,.bootstrap-select.show-menu-arrow.show>.dropdown-toggle .filter-option:before{display:block}.bs-actionsbox,.bs-donebutton,.bs-searchbox{padding:4px 8px}.bs-actionsbox{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bs-actionsbox .btn-group button{width:50%}.bs-donebutton{float:left;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bs-donebutton .btn-group button{width:100%}.bs-searchbox+.bs-actionsbox{padding:0 8px 4px}.bs-searchbox .form-control{margin-bottom:0;width:100%;float:none}
\ No newline at end of file

app/static/css/selectize.bootstrap4.min.css

+/*!
+ * Selectize Theme for Bootstrap 4 v2.0.2
+ *
+ * Copyright 2018 Constantine Seleznyoff <const.seoff@gmail.com>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */.form-control.selectize-control{background-color:transparent;border:0;border-radius:0;box-shadow:none;height:calc(2.25rem + 2px);padding:0;position:relative;transition:none}.form-control.selectize-control .selectize-input{background-clip:padding-box;background-color:#fff;border:1px solid #ced4da;color:#495057;cursor:text;display:inline-block;font-size:1rem;height:100%;overflow:hidden;padding:.375rem .75rem;position:relative;width:100%;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media screen and (prefers-reduced-motion:reduce){.form-control.selectize-control .selectize-input{transition:none}}.form-control.selectize-control .selectize-input *{display:-moz-inline-stack;display:inline-block;*display:inline;zoom:1;vertical-align:baseline}.form-control.selectize-control .selectize-input input{background:none !important;border:none !important;box-shadow:none !important;color:inherit;display:inline-block !important;font-size:inherit;line-height:inherit !important;margin:0 2px 0 0 !important;max-height:none !important;max-width:100% !important;min-height:0 !important;padding:0 !important;text-indent:0 !important;-webkit-user-select:auto !important}.form-control.selectize-control .selectize-input input:hover,.form-control.selectize-control .selectize-input input:focus{outline:none !important}.form-control.selectize-control .selectize-input input::-ms-clear{display:none}.form-control.selectize-control .selectize-input input::placeholder{color:#6c757d;opacity:1}.form-control.selectize-control .selectize-input.focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,0.25)}.form-control.selectize-control .selectize-input.disabled{background-color:#e9ecef;color:#495057;opacity:1}.form-control.selectize-control .selectize-input.dropdown-active{border-bottom-right-radius:0;border-bottom-left-radius:0}.form-control.selectize-control .selectize-dropdown{background-color:transparent;border:0;border-radius:0;box-shadow:none;display:none;height:auto;left:0;margin:0 !important;padding:0;position:absolute;top:100%;transition:none;width:100% !important;z-index:1000}.form-control.selectize-control .selectize-dropdown .selectize-dropdown-content{background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:0 0 .25rem .25rem;border-top-width:0;color:#212529;font-size:1rem;max-height:14.5rem;overflow-x:hidden;overflow-y:auto;padding:.5rem 0;position:relative;text-align:left;-webkit-overflow-scrolling:touch}.form-control.selectize-control .selectize-dropdown .selectize-dropdown-content .option,.form-control.selectize-control .selectize-dropdown .selectize-dropdown-content .create{background-color:transparent;color:#212529;font-weight:400;padding:.25rem 1.5rem;text-align:inherit;white-space:nowrap}.form-control.selectize-control .selectize-dropdown .selectize-dropdown-content .create{cursor:pointer}.form-control.selectize-control .selectize-dropdown .selectize-dropdown-content .option:hover,.form-control.selectize-control .selectize-dropdown .selectize-dropdown-content .option:focus{color:#fff;text-decoration:none;background-color:#007bff}.form-control.selectize-control .selectize-dropdown .selectize-dropdown-content .option.active,.form-control.selectize-control .selectize-dropdown .selectize-dropdown-content .option:active{color:#fff;text-decoration:none;background-color:#007bff}.form-control.selectize-control .selectize-dropdown .selectize-dropdown-content .option.disabled,.form-control.selectize-control .selectize-dropdown .selectize-dropdown-content .option:disabled,.form-control.selectize-control .selectize-dropdown .selectize-dropdown-content .option[data-disabled]{background-color:transparent;color:#6c757d}.form-control.selectize-control .selectize-dropdown .selectize-dropdown-content .option[data-selectable]{cursor:pointer;overflow:hidden}.form-control.selectize-control .selectize-dropdown .selectize-dropdown-content .optgroup{border-bottom:1px solid #e9ecef;margin-bottom:.5rem;padding-bottom:.5rem}.form-control.selectize-control .selectize-dropdown .selectize-dropdown-content .optgroup:last-child{border-bottom-width:0;margin-bottom:0;padding-bottom:0}.form-control.selectize-control .selectize-dropdown .selectize-dropdown-content .optgroup .optgroup-header{color:#6c757d;display:block;font-size:.875rem;margin-bottom:0;padding:.25rem 1.5rem;white-space:nowrap}.form-control.selectize-control.single:after{border-color:#212529 transparent transparent transparent;border-style:solid;border-width:.54127rem .3125rem 0 .3125rem;content:'';display:block;height:0;margin-top:-0.27063rem;position:absolute;top:50%;right:.75rem;width:0}.form-control.selectize-control.single .selectize-input{padding-right:calc(0.75rem + 0.625rem + 0.375rem)}.form-control.selectize-control.multi{height:auto;min-height:calc(2.25rem + 2px)}.form-control.selectize-control.multi .selectize-input{height:auto;min-height:100%;overflow:auto}.form-control.selectize-control.multi .selectize-input .item{margin:0 3px 0 0}.form-control.selectize-control .selectize-dropdown-content .create strong,.form-control.selectize-control.multi .selectize-input .item{background-color:#007bff;color:#fff;display:inline-block;font-size:75%;font-weight:400;line-height:1;padding:.25em .4em;text-align:center;vertical-align:middle;white-space:nowrap;border-radius:.25rem}.form-control.selectize-control.rtl{direction:rtl}.form-control.selectize-control.rtl .selectize-input{text-align:right}.form-control.selectize-control.rtl .selectize-input input{margin:0 0 0 2px !important}.form-control.selectize-control.rtl .selectize-dropdown .selectize-dropdown-content{text-align:right !important}.form-control.selectize-control.rtl.single:after{left:.75rem;right:auto}.form-control.selectize-control.rtl.single .selectize-input{padding-left:calc(0.75rem + 0.625rem + 0.375rem);padding-right:.75rem}.form-control.selectize-control.rtl.multi .selectize-input .item{margin:0 0 0 3px}.form-control.selectize-control.is-valid .selectize-input{border-color:#28a745}.form-control.selectize-control.is-valid .selectize-input:focus{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,0.25)}.form-control.selectize-control.is-invalid .selectize-input{border-color:#dc3545}.form-control.selectize-control.is-invalid .selectize-input:focus{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,0.25)}.form-control-lg.selectize-control{height:calc(2.875rem + 2px);padding:0}.form-control-lg.selectize-control .selectize-input{font-size:1.25rem;padding:.5rem 1rem;border-radius:.3rem}.form-control-lg.selectize-control.single .selectize-input{padding-right:calc(1rem + 0.625rem + 0.5rem)}.form-control-lg.selectize-control.single.rtl .selectize-input{padding-left:calc(1rem + 0.625rem + 0.5rem);padding-right:1rem}.form-control-lg.selectize-control.multi{min-height:calc(2.875rem + 2px)}.form-control-sm.selectize-control{height:calc(1.8125rem + 2px);padding:0}.form-control-sm.selectize-control .selectize-input{font-size:.875rem;padding:.25rem .5rem;border-radius:.2rem}.form-control-sm.selectize-control.single .selectize-input{padding-right:calc(0.5rem + 0.625rem + 0.25rem)}.form-control-sm.selectize-control.single.rtl .selectize-input{padding-left:calc(0.5rem + 0.625rem + 0.25rem);padding-right:.5rem}.form-control-sm.selectize-control.multi{min-height:calc(1.8125rem + 2px)}.input-group>.form-control.selectize-control.multi{height:calc(2.25rem + 2px)}.input-group>.form-control:not(:first-child).selectize-control .selectize-input{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.form-control:not(:last-child).selectize-control .selectize-input{border-top-right-radius:0;border-bottom-right-radius:0}

app/static/js/csentry.js

@@ -102,4 +102,9 @@ $(document).ready(function() {
     $(this).removeClass("is-invalid");
   });
 
+  // Initialize selectize with the default options
+  // for all Select and MultiSelect fields with the
+  // selectize-default class
+  $(".selectize-default").selectize();
+
 });

app/static/js/groups.js

 $(document).ready(function() {
 
   function group_type_update() {
+    var hosts_selectize = $("#hosts")[0].selectize;
     if( $("#type option:selected").text() == "STATIC" ) {
-      $("#hosts").prop("disabled", false);
-      $("#hosts").selectpicker('refresh');
+      hosts_selectize.enable();
     } else {
-      $("#hosts").selectpicker('deselectAll');
-      $("#hosts").prop("disabled", true);
-      $("#hosts").selectpicker('refresh');
+      hosts_selectize.clear();
+      hosts_selectize.disable();
     }
   }
 

app/static/js/hosts.js

@@ -26,21 +26,33 @@ $(document).ready(function() {
     // Retrieve the first available IP for the selected network
     // and update the IP field
     var network_id = $("#network_id").val();
-    $.getJSON(
-      $SCRIPT_ROOT + "/network/_retrieve_first_available_ip/" + network_id,
-      function(json) {
-        $("#ip").val(json.data);
-      }
-    );
+    if ( network_id !== "" ) {
+      $.getJSON(
+        $SCRIPT_ROOT + "/network/_retrieve_first_available_ip/" + network_id,
+        function(json) {
+          $("#ip").val(json.data);
+        }
+      );
+    }
   }
 
   // Select the IOC tag by default depending on the device type
   function update_default_tags(device_type) {
+    var tags_selectize = $("#tags")[0].selectize;
     var ioc_device_types = ["PhysicalMachine", "VirtualMachine", "MicroTCA", "VME"];
     var is_ioc_selected = $.inArray(device_type, ioc_device_types) > -1;
-    $("#tags option").filter(function() {
-      return this.text == "IOC";
-    }).prop("selected", is_ioc_selected).change();
+    var ioc_search = tags_selectize.search("IOC").items[0]
+    if ( ioc_search === undefined ) {
+      // IOC is already selected
+      var ioc_value = $("div .item:contains('IOC')").data("value");
+    } else {
+      var ioc_value = ioc_search.id;
+    }
+    if ( is_ioc_selected ) {
+      tags_selectize.addItem(ioc_value, false);
+    } else {
+      tags_selectize.removeItem(ioc_value, false);
+    }
   }
 
   // And check / uncheck random_mac checkbox
@@ -83,19 +95,28 @@ $(document).ready(function() {
     set_default_ip();
   }
 
+  // Clear the default value so that the user can start typing directly
+  // or click a dropdown item
+  $("#network_id").next(".selectize-control").on( 'click', function () {
+    var network_id_selectize = $("#network_id")[0].selectize;
+    network_id_selectize.clear(true);
+  });
+
   // Set the default IP when changing network
   $("#network_id").on('change', function() {
     set_default_ip();
   });
 
-  // On register host first page load
+  // Only for register new host form
   if( $("#hostForm").length ) {
+    // On first page load
     update_device_type_attributes();
-  }
 
-  $("#device_type_id").on('change', function() {
-    update_device_type_attributes();
-  });
+    // And change
+    $("#device_type_id").on('change', function() {
+      update_device_type_attributes();
+    });
+  }
 
   // The interface name field is hidden in the create host form
   // because it should be forced to the hostname

app/templates/base.html

@@ -5,7 +5,7 @@
   {{super()}}
   <link href="{{ url_for('static', filename='css/open-iconic-bootstrap.min.css') }}" rel="stylesheet">
   <link href="{{ url_for('static', filename='css/datatables.min.css') }}" rel="stylesheet">
-  <link href="{{ url_for('static', filename='css/bootstrap-select.min.css') }}" rel="stylesheet">
+  <link href="{{ url_for('static', filename='css/selectize.bootstrap4.min.css') }}" rel="stylesheet">
   <link href="{{ url_for('static', filename='css/codemirror.css') }}" rel="stylesheet">
   <link href="{{ url_for('static', filename='css/csentry.css') }}" rel="stylesheet">
 {% endblock %}
@@ -63,7 +63,7 @@
 {% block scripts %}
   {{super()}}
   <script src="{{ url_for('static', filename='js/datatables.min.js') }}"></script>
-  <script src="{{ url_for('static', filename='js/bootstrap-select.min.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/selectize.min.js') }}"></script>
   <script src="{{ url_for('static', filename='js/clipboard.min.js') }}"></script>
   <script src="{{ url_for('static', filename='js/showdown.min.js') }}"></script>
   <script src="{{ url_for('static', filename='js/codemirror.js') }}"></script>

app/templates/network/create_group.html

@@ -9,8 +9,8 @@
     {{ render_field(form.name, class_="text-lowercase") }}
     {{ render_field(form.vars) }}
     {{ render_field(form.type) }}
-    {{ render_field(form.children, class_="selectpicker") }}
-    {{ render_field(form.hosts, class_="selectpicker") }}
+    {{ render_field(form.children, class_="selectize-default") }}
+    {{ render_field(form.hosts, class_="selectize-default") }}
     <div class="form-group row">
       <div class="col-sm-10">
         <button type="submit" class="btn btn-primary">Submit</button>

app/templates/network/create_host.html

@@ -8,16 +8,16 @@
     {{ form.hidden_tag() }}
     {{ form.interface_name(type="hidden") }}
     {{ render_field(form.name, class_="text-lowercase") }}
-    {{ render_field(form.device_type_id) }}
+    {{ render_field(form.device_type_id, class_="selectize-default") }}
     {{ render_field(form.description) }}
-    {{ render_field(form.network_id) }}
+    {{ render_field(form.network_id, class_="selectize-default") }}
     {{ render_field(form.ip) }}
     {{ render_field(form.random_mac) }}
     {{ render_field(form.mac) }}
     {{ render_field(form.cnames_string) }}
-    {{ render_field(form.tags, class_="selectpicker") }}
+    {{ render_field(form.tags, class_="selectize-default") }}
     {{ render_field(form.ansible_vars) }}
-    {{ render_field(form.ansible_groups, class_="selectpicker") }}
+    {{ render_field(form.ansible_groups, class_="selectize-default") }}
     <div class="form-group row">
       <div class="col-sm-10">
         <button type="submit" class="btn btn-primary">Submit</button>

app/templates/network/create_interface.html

@@ -21,12 +21,12 @@
     {{ form.hidden_tag() }}
     {{ render_field(form.host_id, disabled=True) }}
     {{ render_field(form.interface_name, class_="text-lowercase") }}
-    {{ render_field(form.network_id) }}
+    {{ render_field(form.network_id, class_="selectize-default") }}
     {{ render_field(form.ip) }}
     {{ render_field(form.random_mac) }}
     {{ render_field(form.mac) }}
     {{ render_field(form.cnames_string) }}
-    {{ render_field(form.tags, class_="selectpicker") }}
+    {{ render_field(form.tags, class_="selectize-default") }}
     <div class="form-group row">
       <div class="col-sm-10">
         <button type="submit" class="btn btn-primary">Submit</button>

app/templates/network/edit_group.html

@@ -18,8 +18,8 @@
     {{ render_field(form.name, class_="text-lowercase") }}
     {{ render_field(form.vars) }}
     {{ render_field(form.type) }}
-    {{ render_field(form.children, class_="selectpicker") }}
-    {{ render_field(form.hosts, class_="selectpicker") }}
+    {{ render_field(form.children, class_="selectize-default") }}
+    {{ render_field(form.hosts, class_="selectize-default") }}
     <div class="form-group row">
       <div class="col-sm-10">
         <button type="submit" class="btn btn-primary">Submit</button>

app/templates/network/edit_host.html

@@ -19,10 +19,10 @@
   <form id="editHostForm" method="POST">
     {{ form.hidden_tag() }}
     {{ render_field(form.name, class_="text-lowercase") }}
-    {{ render_field(form.device_type_id) }}
+    {{ render_field(form.device_type_id, class_="selectize-default") }}
     {{ render_field(form.description) }}
     {{ render_field(form.ansible_vars) }}
-    {{ render_field(form.ansible_groups, class_="selectpicker") }}
+    {{ render_field(form.ansible_groups, class_="selectize-default") }}
     <div class="form-group row">
       <div class="col-sm-10">
         <button type="submit" class="btn btn-primary">Submit</button>

app/templates/network/edit_interface.html

@@ -24,11 +24,11 @@
     {{ form.hidden_tag() }}
     {{ render_field(form.host_id, disabled=True) }}
     {{ render_field(form.interface_name, class_="text-lowercase") }}
-    {{ render_field(form.network_id) }}
+    {{ render_field(form.network_id, class_="selectize-default") }}
     {{ render_field(form.ip) }}
     {{ render_field(form.mac) }}
     {{ render_field(form.cnames_string) }}
-    {{ render_field(form.tags, class_="selectpicker") }}
+    {{ render_field(form.tags, class_="selectize-default") }}
     <div class="form-group row">
       <div class="col-sm-10">
         <button type="submit" class="btn btn-primary">Submit</button>