Closes #10054: Implement advanced UI controls for object selection (#11952)

* WIP

* WIP

* WIP

* Make object selector functional

* Replace extraneous form fields with selector widgets

* Avoid overlap with filterset field names

* Show checkmarks next to visibile filters

* Update results automatically when searching

* Include selector for device/VM component parent fields

* Use selector for filtering VLAN group/site

* Limit selector to 100 results

netbox/project-static/src/htmx.ts

@@ -1,9 +1,10 @@
 import { getElements, isTruthy } from './util';
 import { initButtons } from './buttons';
 import { initSelect } from './select';
+import { initObjectSelector } from './objectSelector';
 
 function initDepedencies(): void {
-  for (const init of [initButtons, initSelect]) {
+  for (const init of [initButtons, initSelect, initObjectSelector]) {
     init();
   }
 }

netbox/project-static/src/objectSelector.ts

@@ -0,0 +1,32 @@
+import { getElements } from './util';
+
+function handleSelection(link: HTMLAnchorElement): void {
+  const selector_results = document.getElementById('selector_results');
+  if (selector_results == null) {
+    return
+  }
+  const target_id = selector_results.getAttribute('data-selector-target');
+  if (target_id == null) {
+    return
+  }
+  const target = document.getElementById(target_id);
+  if (target == null) {
+    return
+  }
+
+  const label = link.getAttribute('data-label');
+  const value = link.getAttribute('data-value');
+
+  //@ts-ignore
+  target.slim.setData([
+    {text: label, value: value}
+  ]);
+
+}
+
+
+export function initObjectSelector(): void {
+  for (const element of getElements<HTMLAnchorElement>('#selector_results a')) {
+    element.addEventListener('click', () => handleSelection(element));
+  }
+}