Replace ApiSelect with TomSelect

netbox/project-static/src/index.ts

@@ -1,4 +1,5 @@
 import '@popperjs/core';
 import 'bootstrap';
 import 'htmx.org';
+import 'tom-select';
 import './netbox';

netbox/project-static/src/netbox.ts

@@ -1,7 +1,8 @@
 import { initForms } from './forms';
 import { initBootstrap } from './bs';
 import { initQuickSearch } from './search';
-import { initSelect } from './select';
+// import { initSelect } from './select';
+import { initTomSelect } from './tomSelect';
 import { initButtons } from './buttons';
 import { initColorMode } from './colorMode';
 import { initMessages } from './messages';
@@ -22,7 +23,8 @@ function initDocument(): void {
     initMessages,
     initForms,
     initQuickSearch,
-    initSelect,
+    // initSelect,
+    initTomSelect,
     initDateSelector,
     initButtons,
     initClipboard,

netbox/project-static/src/tomSelect.ts

@@ -0,0 +1,36 @@
+import { getElements } from './util';
+import TomSelect from 'tom-select';
+
+export function initTomSelect(): void {
+
+  // Static selects
+  for (const select of getElements<HTMLSelectElement>('select:not(.api-select)')) {
+    new TomSelect(select, {});
+  }
+
+  // API selects
+  for (const select of getElements<HTMLSelectElement>('.api-select')) {
+    const api_url = select.getAttribute('data-url') as string;
+    new TomSelect(select, {
+      valueField: 'id',
+      labelField: 'display',
+      searchField: ['name'],
+      copyClassesToDropdown: false,
+      dropdownParent: 'body',
+      controlInput: '<input>',
+      preload: 'focus',
+      load: function(query, callback) {
+        var url = api_url + '?brief=True&q=' + encodeURIComponent(query);
+        console.log(url);
+        fetch(url)
+            .then(response => response.json())
+            .then(json => {
+                callback(json.results);
+            }).catch(()=>{
+                callback();
+            });
+		},
+	});
+  }
+
+}

netbox/templates/django/forms/widgets/select.html

@@ -1,4 +1,4 @@
-<select name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %} class="{% if 'size' in widget.attrs %}form-select form-select-sm{% else %}netbox-static-select{% endif %}{% if 'class' in widget.attrs %} {{ widget.attrs.class }}{% endif %}">{% for group_name, group_choices, group_index in widget.optgroups %}{% if group_name %}
+<select name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %} class="form-select {% if 'class' in widget.attrs %} {{ widget.attrs.class }}{% endif %}">{% for group_name, group_choices, group_index in widget.optgroups %}{% if group_name %}
   <optgroup label="{{ group_name }}">{% endif %}{% for option in group_choices %}
   {% include option.template_name with widget=option %}{% endfor %}{% if group_name %}
   </optgroup>{% endif %}{% endfor %}

netbox/utilities/forms/widgets/apiselect.py

@@ -24,7 +24,7 @@ class APISelect(forms.Select):
     def __init__(self, api_url=None, full=False, *args, **kwargs):
         super().__init__(*args, **kwargs)
 
-        self.attrs['class'] = 'netbox-api-select'
+        self.attrs['class'] = 'api-select'
         self.dynamic_params: Dict[str, List[str]] = {}
         self.static_params: Dict[str, List[str]] = {}
 
@@ -153,8 +153,4 @@ class APISelect(forms.Select):
 
 
 class APISelectMultiple(APISelect, forms.SelectMultiple):
-
+    pass
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
-
-        self.attrs['data-multiple'] = 1

netbox/utilities/forms/widgets/select.py

@@ -25,7 +25,6 @@ class BulkEditNullBooleanSelect(forms.NullBooleanSelect):
             ('2', 'Yes'),
             ('3', 'No'),
         )
-        self.attrs['class'] = 'netbox-static-select'
 
 
 class ColorSelect(forms.Select):