From f253f164a3a90f7cde8926c94793cb0197190744 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@digitalocean.com>
Date: Wed, 11 Oct 2017 10:14:09 -0400
Subject: [PATCH] Closes #1510: Added ability to search by name when adding
 devices to a cluster

---
 .../virtualization/cluster_add_devices.html   | 47 +++++++++++++++++--
 netbox/virtualization/forms.py                |  1 -
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/netbox/templates/virtualization/cluster_add_devices.html b/netbox/templates/virtualization/cluster_add_devices.html
index 6c874d38f45..2029ea5b8e3 100644
--- a/netbox/templates/virtualization/cluster_add_devices.html
+++ b/netbox/templates/virtualization/cluster_add_devices.html
@@ -20,11 +20,27 @@ <h3>{% block title %}Add Devices to Cluster {{ cluster }}{% endblock %}</h3>
                     </div>
                 {% endif %}
                 <div class="panel panel-default">
-                    <div class="panel-heading"><strong>Devices</strong></div>
+                    <div class="panel-heading"><strong>Device Selection</strong></div>
                     <div class="panel-body">
-                        {% render_field form.region %}
-                        {% render_field form.site %}
-                        {% render_field form.rack %}
+                        <ul class="nav nav-tabs" role="tablist">
+                            <li role="presentation" class="active"><a href="#search" aria-controls="search" role="tab" data-toggle="tab">Search</a></li>
+                            <li role="presentation"><a href="#select" aria-controls="home" role="tab" data-toggle="tab">Select</a></li>
+                        </ul>
+                        <div class="tab-content">
+                            <div class="tab-pane active" id="search">
+                                <div class="form-group">
+                                    <label class="col-md-3 control-label" for="id_search">Search</label>
+                                    <div class="col-md-9">
+                                        <input type="text" class="form-control" name="search" id="id_search" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="tab-pane" id="select">
+                                {% render_field form.region %}
+                                {% render_field form.site %}
+                                {% render_field form.rack %}
+                            </div>
+                        </div>
                         {% render_field form.devices %}
                     </div>
                 </div>
@@ -40,5 +56,26 @@ <h3>{% block title %}Add Devices to Cluster {{ cluster }}{% endblock %}</h3>
 {% endblock %}
 
 {% block javascript %}
-    <script src="{% static 'js/livesearch.js' %}?v{{ settings.VERSION }}"></script>
+<script type="text/javascript">
+    $(document).ready(function() {
+        var device_list = $('#id_devices');
+        $('#id_search').autocomplete({
+            source: function(request, response) {
+                $.ajax({
+                    type: 'GET',
+                    url: netbox_api_path + 'dcim/devices/',
+                    data: 'q=' + request.term,
+                    beforeSend: function() {
+                        device_list.empty();
+                    },
+                    success: function(data) {
+                        response($.map(data.results, function(item) {
+                            device_list.append('<option value="' + item['id'] + '">' + item['display_name'] + '</option>');
+                        }));
+                    }
+                });
+            }
+        });
+    });
+</script>
 {% endblock %}
diff --git a/netbox/virtualization/forms.py b/netbox/virtualization/forms.py
index 461c1cf11d6..63561a08cc9 100644
--- a/netbox/virtualization/forms.py
+++ b/netbox/virtualization/forms.py
@@ -186,7 +186,6 @@ class ClusterAddDevicesForm(BootstrapMixin, ChainedFieldsMixin, forms.Form):
             ('site', 'site'),
             ('rack', 'rack'),
         ),
-        label='Device',
         widget=APISelectMultiple(
             api_url='/api/dcim/devices/?site_id={{site}}&rack_id={{rack}}',
             display_field='display_name',