diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index 5146f855f..a2b8ee507 100644 Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map index c28525be9..0d3feeced 100644 Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ diff --git a/netbox/project-static/src/index.ts b/netbox/project-static/src/index.ts index 77c1e85ce..7834ae927 100644 --- a/netbox/project-static/src/index.ts +++ b/netbox/project-static/src/index.ts @@ -1,4 +1,5 @@ import '@popperjs/core'; import 'bootstrap'; import 'htmx.org'; +import 'tom-select'; import './netbox'; diff --git a/netbox/project-static/src/netbox.ts b/netbox/project-static/src/netbox.ts index ed294e655..45009682f 100644 --- a/netbox/project-static/src/netbox.ts +++ b/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, diff --git a/netbox/project-static/src/tomSelect.ts b/netbox/project-static/src/tomSelect.ts new file mode 100644 index 000000000..f03464ac8 --- /dev/null +++ b/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('select:not(.api-select)')) { + new TomSelect(select, {}); + } + + // API selects + for (const select of getElements('.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: '', + 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(); + }); + }, + }); + } + +} diff --git a/netbox/templates/django/forms/widgets/select.html b/netbox/templates/django/forms/widgets/select.html index 0e87394e3..4688a9e8e 100644 --- a/netbox/templates/django/forms/widgets/select.html +++ b/netbox/templates/django/forms/widgets/select.html @@ -1,4 +1,4 @@ -{% for group_name, group_choices, group_index in widget.optgroups %}{% if group_name %} {% endif %}{% for option in group_choices %} {% include option.template_name with widget=option %}{% endfor %}{% if group_name %} {% endif %}{% endfor %} diff --git a/netbox/utilities/forms/widgets/apiselect.py b/netbox/utilities/forms/widgets/apiselect.py index e4b02cb1d..ac891c0bb 100644 --- a/netbox/utilities/forms/widgets/apiselect.py +++ b/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): - - def __init__(self, *args, **kwargs): - super().__init__(*args, **kwargs) - - self.attrs['data-multiple'] = 1 + pass diff --git a/netbox/utilities/forms/widgets/select.py b/netbox/utilities/forms/widgets/select.py index 2e2d829cd..33e6b2a2f 100644 --- a/netbox/utilities/forms/widgets/select.py +++ b/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):