From ae210672fbf22165f9aca6c0d3005c4aaf23d507 Mon Sep 17 00:00:00 2001
From: jeremystretch <jstretch@netboxlabs.com>
Date: Fri, 10 Mar 2023 16:13:52 -0500
Subject: [PATCH] Update results automatically when searching

---
 netbox/templates/htmx/object_selector.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/netbox/templates/htmx/object_selector.html b/netbox/templates/htmx/object_selector.html
index eae027bea..f0b6da404 100644
--- a/netbox/templates/htmx/object_selector.html
+++ b/netbox/templates/htmx/object_selector.html
@@ -6,9 +6,9 @@
 </div>
 <div class="modal-body row">
   <div class="col-3">
-    <div class="list-group">
+    <div class="list-group list-group-flush">
       {% for field in form.visible_fields %}
-        <a href="#" class="list-group-item list-group-item-action px-2 py-1" data-bs-toggle="collapse" data-bs-target="#checkmark{{ forloop.counter }}, #selector{{ forloop.counter }}">
+        <a href="#" class="list-group-item list-group-item-action px-0 py-1" data-bs-toggle="collapse" data-bs-target="#checkmark{{ forloop.counter }}, #selector{{ forloop.counter }}">
           <span id="checkmark{{ forloop.counter }}" class="collapse{% if forloop.counter < 3 %} show{% endif %}"><i class="mdi mdi-check-bold"></i></span>
           {{ field.label }}
         </a>
@@ -16,14 +16,15 @@
     </div>
   </div>
   <div class="col-9">
-    <form hx-get="{% url 'htmx_object_selector' %}?_model={{ model|meta:"label_lower" }}" hx-target="#selector_results">
+    <form hx-get="{% url 'htmx_object_selector' %}?_model={{ model|meta:"label_lower" }}" hx-target="#selector_results" hx-trigger="load, submit, keyup from:#id_q delay:500ms">
+      <input type="hidden" name="_search" value="true" />
       <div class="tab-content p-1">
         {% for field in form.visible_fields %}
           <div class="collapse{% if forloop.counter < 3 %} show{% endif %}" id="selector{{ forloop.counter }}">{% render_field field %}</div>
         {% endfor %}
       </div>
       <div class="text-end">
-        <button type="submit" name="_search" value="true" class="btn btn-sm btn-primary">Submit</button>
+        <button type="submit" class="btn btn-sm btn-primary">Search</button>
       </div>
     </form>
     <div id="selector_results" class="mt-3" data-selector-target="{{ target_id }}"></div>