Add global search feature

data/interfaces/default/base.html

@@ -57,6 +57,18 @@ from plexpy import version
             </div>
             <div class="collapse navbar-collapse navbar-right" id="navbar-collapse-1">
                 <ul class="nav navbar-nav">
+                    <li>
+                        <form action="search" method="post" class="form" id="search_form">
+                            <div class="input-group">
+                                <span class="input-textbox">
+                                    <input type="text" class="form-control" name="search_query" id="search_query" aria-label="Search" placeholder="Search..."/>
+                                </span>
+                                <span class="input-group-btn">
+                                    <button class="btn btn-dark btn-inactive" type="submit" id="search_button"><i class="fa fa-search"></i></button>
+                                </span>
+                            </div>
+                        </form>
+                    </li>
                     % if title=="Home":
                         <li class="active"><a href="home"><i class="fa fa-lg fa-home"></i></a></li>
                     % else:
@@ -117,6 +129,28 @@ ${next.headerIncludes()}
         $('#updatebar').show();
     }
 </script>
+<script>
+    $('#search_form').submit(function (e) {
+        if ($('#search_query').hasClass('active') && $('#search_query').val().trim() != '') {
+            $.ajax({
+                type: 'post',
+                url: 'search',
+                data: { 'query': $('#search_query').val() }
+            })
+        } else {
+            e.preventDefault();
+            $('#search_button').removeClass('btn-inactive');
+            $('#search_query').clearQueue().val('').animate({ right: '0', width: '250px' }).addClass('active').focus();
+        }
+    })
+    $('#search_query').on('blur', function (e) {
+        if ($(this).val().trim() == '') {
+            $(this).delay(200).animate({ right: '-250px', width: '0' }, function () {
+                $('#search_button').addClass('btn-inactive');
+            }).removeClass('active');
+        }
+    });
+</script>
 ${next.javascriptIncludes()}
 </body>
 </html>

data/interfaces/default/css/plexpy.css

@@ -1246,6 +1246,10 @@ a:hover .summary-poster-face-track .summary-poster-face-overlay span {
     background-size: contain;
     height: 16px;
 }
+#children-list, #search-results-list {
+    position: relative;
+    z-index: 0;
+}
 .item-children-wrapper {
 }
 .item-children-section-title {
@@ -2411,4 +2415,38 @@ a .home-platforms-instance-list-oval:hover,
     .dashboard-instance {
         width: 100%;
     }
+}
+
+#search_form {
+    width: 350px;
+    padding: 8px 15px;
+}
+#search_form span.input-textbox {
+    overflow: hidden;
+    width: 250px;
+    height: 34px;
+    display: inline-flex;
+    float: right;
+}
+#search_form #search_query {
+    width: 0;
+    height: 34px;
+    margin-top: 0;
+    float: right;
+    position: relative;
+    right: -250px;
+    border-radius: 3px 0 0 3px;
+}
+#search_form #search_query.active {
+    width: 250px;
+    right: 0px;
+}
+#search_form #search_button.btn-inactive {
+    background-color: #000;
+    border: 1px solid rgba(0,0,0,0);
+    -webkit-transition: background 0.3s;
+    -moz-transition: background 0.3s;
+    -ms-transition: background 0.3s;
+    -o-transition: background 0.3s;
+    transition: background 0.3s;
 }

data/interfaces/default/search.html

@@ -0,0 +1,41 @@
+<%inherit file="base.html"/>
+
+<%def name="headIncludes()">
+</%def>
+
+<%def name="headerIncludes()">
+</%def>
+
+<%def name="body()">
+<div class='container-fluid'>
+    <div class='table-card-header'>
+        <div class="header-bar">
+            <span><i class="fa fa-search"></i> Search Results 
+            % if query:
+            for <strong>${query}</strong>
+            % endif
+            </span>
+        </div>
+    </div>
+    <div class='table-card-back'>
+        <div id="search-results-list"><i class="fa fa-refresh fa-spin"></i>&nbsp; Loading search results...</div>
+    </div>
+</div>
+</%def>
+
+<%def name="javascriptIncludes()">
+<script>
+    $('#search_button').removeClass('btn-inactive');
+    $('#search_query').val('${query}').css({ right: '0', width: '250px' }).addClass('active');
+
+    $.ajax({
+        url: 'get_search_results_children',
+        type: "GET",
+        async: true,
+        data: {'query': "${query}"},
+        complete: function (xhr, status) {
+            $("#search-results-list").html(xhr.responseText);
+        }
+    });
+</script>
+</%def>

plexpy/webserve.py

@@ -1327,6 +1327,12 @@ class WebInterface(object):
             cherrypy.response.headers['Content-type'] = 'application/json'
             return json.dumps({'message': 'no data received'})
 
+    @cherrypy.expose
+    def search(self, search_query=''):
+        query = search_query.replace('"', '')
+
+        return serve_template(templatename="search.html", title="Search", query=query)
+
     @cherrypy.expose
     def search_results(self, query, **kwargs):