#55 first attempt at "suggestions" starting with "Comming Soon" and "In Theaters"

PlexRequests.UI/Content/custom.css

@@ -191,3 +191,17 @@ label {
   margin: 20px 0;
   color: #ccc; }
 
+.form-control-withbuttons {
+  padding-right: 105px; }
+
+.input-group-addon .btn-group {
+  position: absolute;
+  right: 45px;
+  z-index: 2;
+  top: 6px; }
+
+.input-group-addon .btn-group .btn {
+  border: 1px solid rgba(255, 255, 255, 0.7) !important;
+  padding: 3px 12px;
+  color: rgba(255, 255, 255, 0.7) !important; }
+

PlexRequests.UI/Content/custom.min.css

@@ -1 +1 @@
-@media(min-width:768px){.row{position:relative;}.bottom-align-text{position:absolute;bottom:0;right:0;}}@media(max-width:48em){.home{padding-top:1rem;}}@media(min-width:48em){.home{padding-top:4rem;}}.btn{border-radius:.25rem !important;}.multiSelect{background-color:#4e5d6c;}.form-control-custom{background-color:#4e5d6c !important;color:#fff !important;border-radius:0;box-shadow:0 0 0 !important;}h1{font-size:3.5rem !important;font-weight:600 !important;}.request-title{margin-top:0 !important;font-size:1.9rem !important;}p{font-size:1.1rem !important;}label{display:inline-block !important;margin-bottom:.5rem !important;font-size:16px !important;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background:#4e5d6c;}.navbar .nav a .fa,.dropdown-menu a .fa{font-size:130%;top:1px;position:relative;display:inline-block;margin-right:5px;}.dropdown-menu a .fa{top:2px;}.btn-danger-outline{color:#d9534f !important;background-color:transparent;background-image:none;border-color:#d9534f !important;}.btn-danger-outline:focus,.btn-danger-outline.focus,.btn-danger-outline:active,.btn-danger-outline.active,.btn-danger-outline:hover,.open>.btn-danger-outline.dropdown-toggle{color:#fff !important;background-color:#d9534f !important;border-color:#d9534f !important;}.btn-primary-outline{color:#ff761b !important;background-color:transparent;background-image:none;border-color:#ff761b !important;}.btn-primary-outline:focus,.btn-primary-outline.focus,.btn-primary-outline:active,.btn-primary-outline.active,.btn-primary-outline:hover,.open>.btn-primary-outline.dropdown-toggle{color:#fff !important;background-color:#df691a !important;border-color:#df691a !important;}.btn-info-outline{color:#5bc0de !important;background-color:transparent;background-image:none;border-color:#5bc0de !important;}.btn-info-outline:focus,.btn-info-outline.focus,.btn-info-outline:active,.btn-info-outline.active,.btn-info-outline:hover,.open>.btn-info-outline.dropdown-toggle{color:#fff !important;background-color:#5bc0de !important;border-color:#5bc0de !important;}.btn-warning-outline{color:#f0ad4e !important;background-color:transparent;background-image:none;border-color:#f0ad4e !important;}.btn-warning-outline:focus,.btn-warning-outline.focus,.btn-warning-outline:active,.btn-warning-outline.active,.btn-warning-outline:hover,.open>.btn-warning-outline.dropdown-toggle{color:#fff !important;background-color:#f0ad4e !important;border-color:#f0ad4e !important;}.btn-success-outline{color:#5cb85c !important;background-color:transparent;background-image:none;border-color:#5cb85c !important;}.btn-success-outline:focus,.btn-success-outline.focus,.btn-success-outline:active,.btn-success-outline.active,.btn-success-outline:hover,.open>.btn-success-outline.dropdown-toggle{color:#fff !important;background-color:#5cb85c !important;border-color:#5cb85c !important;}#movieList .mix{display:none;}#tvList .mix{display:none;}.scroll-top-wrapper{position:fixed;opacity:0;visibility:hidden;overflow:hidden;text-align:center;z-index:99999999;background-color:#4e5d6c;color:#eee;width:50px;height:48px;line-height:48px;right:30px;bottom:30px;padding-top:2px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;}.scroll-top-wrapper:hover{background-color:#637689;}.scroll-top-wrapper.show{visibility:visible;cursor:pointer;opacity:1;}.scroll-top-wrapper i.fa{line-height:inherit;}.no-search-results{text-align:center;}.no-search-results .no-search-results-icon{font-size:10em;color:#4e5d6c;}.no-search-results .no-search-results-text{margin:20px 0;color:#ccc;}
+@media(min-width:768px){.row{position:relative;}.bottom-align-text{position:absolute;bottom:0;right:0;}}@media(max-width:48em){.home{padding-top:1rem;}}@media(min-width:48em){.home{padding-top:4rem;}}.btn{border-radius:.25rem !important;}.multiSelect{background-color:#4e5d6c;}.form-control-custom{background-color:#4e5d6c !important;color:#fff !important;border-radius:0;box-shadow:0 0 0 !important;}h1{font-size:3.5rem !important;font-weight:600 !important;}.request-title{margin-top:0 !important;font-size:1.9rem !important;}p{font-size:1.1rem !important;}label{display:inline-block !important;margin-bottom:.5rem !important;font-size:16px !important;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background:#4e5d6c;}.navbar .nav a .fa,.dropdown-menu a .fa{font-size:130%;top:1px;position:relative;display:inline-block;margin-right:5px;}.dropdown-menu a .fa{top:2px;}.btn-danger-outline{color:#d9534f !important;background-color:transparent;background-image:none;border-color:#d9534f !important;}.btn-danger-outline:focus,.btn-danger-outline.focus,.btn-danger-outline:active,.btn-danger-outline.active,.btn-danger-outline:hover,.open>.btn-danger-outline.dropdown-toggle{color:#fff !important;background-color:#d9534f !important;border-color:#d9534f !important;}.btn-primary-outline{color:#ff761b !important;background-color:transparent;background-image:none;border-color:#ff761b !important;}.btn-primary-outline:focus,.btn-primary-outline.focus,.btn-primary-outline:active,.btn-primary-outline.active,.btn-primary-outline:hover,.open>.btn-primary-outline.dropdown-toggle{color:#fff !important;background-color:#df691a !important;border-color:#df691a !important;}.btn-info-outline{color:#5bc0de !important;background-color:transparent;background-image:none;border-color:#5bc0de !important;}.btn-info-outline:focus,.btn-info-outline.focus,.btn-info-outline:active,.btn-info-outline.active,.btn-info-outline:hover,.open>.btn-info-outline.dropdown-toggle{color:#fff !important;background-color:#5bc0de !important;border-color:#5bc0de !important;}.btn-warning-outline{color:#f0ad4e !important;background-color:transparent;background-image:none;border-color:#f0ad4e !important;}.btn-warning-outline:focus,.btn-warning-outline.focus,.btn-warning-outline:active,.btn-warning-outline.active,.btn-warning-outline:hover,.open>.btn-warning-outline.dropdown-toggle{color:#fff !important;background-color:#f0ad4e !important;border-color:#f0ad4e !important;}.btn-success-outline{color:#5cb85c !important;background-color:transparent;background-image:none;border-color:#5cb85c !important;}.btn-success-outline:focus,.btn-success-outline.focus,.btn-success-outline:active,.btn-success-outline.active,.btn-success-outline:hover,.open>.btn-success-outline.dropdown-toggle{color:#fff !important;background-color:#5cb85c !important;border-color:#5cb85c !important;}#movieList .mix{display:none;}#tvList .mix{display:none;}.scroll-top-wrapper{position:fixed;opacity:0;visibility:hidden;overflow:hidden;text-align:center;z-index:99999999;background-color:#4e5d6c;color:#eee;width:50px;height:48px;line-height:48px;right:30px;bottom:30px;padding-top:2px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;}.scroll-top-wrapper:hover{background-color:#637689;}.scroll-top-wrapper.show{visibility:visible;cursor:pointer;opacity:1;}.scroll-top-wrapper i.fa{line-height:inherit;}.no-search-results{text-align:center;}.no-search-results .no-search-results-icon{font-size:10em;color:#4e5d6c;}.no-search-results .no-search-results-text{margin:20px 0;color:#ccc;}.form-control-withbuttons{padding-right:105px;}.input-group-addon .btn-group{position:absolute;right:45px;z-index:2;top:6px;}.input-group-addon .btn-group .btn{border:1px solid rgba(255,255,255,.7) !important;padding:3px 12px;color:rgba(255,255,255,.7) !important;}

PlexRequests.UI/Content/custom.scss

@@ -244,3 +244,20 @@ $border-radius: 10px;
     margin: 20px 0;
     color: #ccc;
 }
+
+.form-control-withbuttons {
+    padding-right: 105px;
+}
+
+.input-group-addon .btn-group {
+    position: absolute;
+    right: 45px;
+    z-index: 2;
+    top: 6px;
+}
+
+.input-group-addon .btn-group .btn {
+    border: 1px solid rgba(255,255,255,.7) !important;
+    padding: 3px 12px;
+    color: rgba(255,255,255,.7) !important;
+}

PlexRequests.UI/Content/search.js

@@ -22,6 +22,16 @@ $("#movieSearchContent").on("input", function () {
 
 });
 
+$('#moviesComingSoon').on('click', function (e) {
+    e.preventDefault();
+    moviesComingSoon();
+});
+
+$('#moviesInTheaters').on('click', function (e) {
+    e.preventDefault();
+    moviesInTheaters();
+});
+
 // Type in TV search
 $("#tvSearchContent").on("input", function () {
     if (tvimer) {
@@ -114,10 +124,23 @@ function sendRequestAjax(data, type, url, buttonId) {
 }
 
 function movieSearch() {
-    $("#movieList").html("");
     var query = $("#movieSearchContent").val();
+    getMovies("/search/movie/" + query);
+}
+
+function moviesComingSoon() {
+    getMovies("/search/movie/upcoming");
+}
 
-    $.ajax("/search/movie/" + query).success(function (results) {
+function moviesInTheaters() {
+    getMovies("/search/movie/playing")
+}
+
+function getMovies(url) {
+    $("#movieList").html("");
+    
+
+    $.ajax(url).success(function (results) {
         if (results.length > 0) {
             results.forEach(function(result) {
                 var context = buildMovieContext(result);
@@ -133,11 +156,15 @@ function movieSearch() {
     });
 };
 
-function tvSearch() {
-    $("#tvList").html("");
+function tvShowSearch() {
     var query = $("#tvSearchContent").val();
+    getTvShows("/search/tv/" + query);
+}
+
+function getTvShows(url) {
+    $("#tvList").html("");
 
-    $.ajax("/search/tv/" + query).success(function (results) {
+    $.ajax(url).success(function (results) {
         if (results.length > 0) {
             results.forEach(function(result) {
                 var context = buildTvShowContext(result);

PlexRequests.UI/Views/Search/Index.cshtml

@@ -26,8 +26,18 @@
             <!-- Movie tab -->
             <div role="tabpanel" class="tab-pane active" id="MoviesTab">
                 <div class="input-group">
-                    <input id="movieSearchContent" type="text" class="form-control form-control-custom">
+                    <input id="movieSearchContent" type="text" class="form-control form-control-custom form-control-withbuttons">
                     <div class="input-group-addon">
+                        <div class="btn-group">
+                            <a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+                                Suggestions
+                                <i class="fa fa-chevron-down"></i>
+                            </a>
+                            <ul class="dropdown-menu">
+                                <li><a id="moviesComingSoon" href="#">Coming Soon</a></li>
+                                <li><a id="moviesInTheaters" href="#">In Theaters</a></li>
+                            </ul>
+                        </div>
                         <i id="movieSearchButton" class="fa fa-search"></i>
                     </div>
                 </div>