diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.css b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.css
index 22d91d683..c6eb0f3f3 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.css
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.css
@@ -15,8 +15,8 @@
top: 0;
z-index: 1;
}
-.spacer {
- flex: 1 1 auto;
+.middle {
+ display: flex;
}
.example-form {
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
index c1068f690..0f0a626bb 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
@@ -25,22 +25,21 @@
-
diff --git a/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.html b/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.html
index 03ba0e5ba..e2ec72a90 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.html
+++ b/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.html
@@ -1,6 +1,12 @@
-
-
-
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss b/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss
index ce71d59cb..c05ab8a99 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss
+++ b/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss
@@ -1,3 +1,6 @@
+$ombi-primary:#3f3f3f;
+$ombi-accent: #258a6d;
+
.quater-width {
width: 25em;
}
@@ -11,4 +14,20 @@
height: 50px;
line-height: 50px;
padding: 0px 5px;
+}
+
+::ng-deep ngb-typeahead-window.dropdown-menu {
+ background-color: $ombi-primary;
+ width: 24%;
+ overflow: auto;
+ height: 500px;
+}
+
+::ng-deep ngb-typeahead-window button.dropdown-item {
+ color:white;
+}
+
+::ng-deep ngb-typeahead-window .dropdown-item.active, .dropdown-item:active {
+ text-decoration: none;
+ background-color: $ombi-accent;
}
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.ts b/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.ts
index b1450e993..b64ee506f 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.ts
+++ b/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.ts
@@ -1,11 +1,11 @@
-import { Component, Input } from '@angular/core';
-import { Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { SearchV2Service } from '../services/searchV2.service';
import { IMultiSearchResult } from '../interfaces';
-import { MatAutocompleteSelectedEvent } from '@angular/material';
import { Router } from '@angular/router';
+import { NgbTypeaheadSelectItemEvent } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-nav-search',
@@ -14,28 +14,33 @@ import { Router } from '@angular/router';
})
export class NavSearchComponent {
- public searchChanged: Subject = new Subject();
- public searchText: string;
- public searchResult: IMultiSearchResult[];
+ public selectedItem: string;
+
+
+ public searching = false;
+ public searchFailed = false;
+
+
+ public formatter = (result: IMultiSearchResult) => result.media_type == "movie" ? result.title : result.name;
+
+ public searchModel = (text$: Observable) =>
+ text$.pipe(
+ debounceTime(600),
+ distinctUntilChanged(),
+ switchMap(term =>
+ this.searchService.multiSearch(term)
+ )
+ )
constructor(private searchService: SearchV2Service, private router: Router) {
- this.searchChanged.pipe(
- debounceTime(600), // Wait Xms after the last event before emitting last event
- distinctUntilChanged(), // only emit if value is different from previous value
- ).subscribe(x => {
- this.searchText = x as string;
- this.searchService.multiSearch(this.searchText).subscribe(x => this.searchResult = x)
- });
- }
- public search(text: any) {
- this.searchChanged.next(text.target.value);
}
- public selected(option: MatAutocompleteSelectedEvent) {
- var selected = option.option.value as IMultiSearchResult;
- if (selected.media_type == "movie") {
- this.router.navigate([`details/movie/${selected.id}`]);
+
+
+ public selected(event: NgbTypeaheadSelectItemEvent) {
+ if (event.item.media_type == "movie") {
+ this.router.navigate([`details/movie/${event.item.id}`]);
return;
}
}
diff --git a/src/Ombi/ClientApp/yarn.lock b/src/Ombi/ClientApp/yarn.lock
index ba9a63da0..c64062879 100644
--- a/src/Ombi/ClientApp/yarn.lock
+++ b/src/Ombi/ClientApp/yarn.lock
@@ -227,7 +227,6 @@
"@ng-bootstrap/ng-bootstrap@^4.0.1":
version "4.0.1"
resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-4.0.1.tgz#75a6b881b24d869624caa5b5f8a4070650ad5bc4"
- integrity sha512-COQ6MgZ+HD27pGz2sVPB2ttCZozrjHPs0sayuZkleMvzTllYX/eQEPAOiS+yRsXNkDApi5/XGlIFVWBjxTtwoA==
dependencies:
tslib "^1.9.0"
@@ -551,7 +550,6 @@ amdefine@>=0.0.4:
angular-bootstrap-md@^7.3.0:
version "7.3.0"
resolved "https://registry.yarnpkg.com/angular-bootstrap-md/-/angular-bootstrap-md-7.3.0.tgz#cc0db9035553ffe0168049bfac9de92cfe5ee268"
- integrity sha512-FACXdj+fGe7aA1yNBoFFV6I8Gs9+ithMdGAl4ZJ7DxqD5JudtWqlAwapNpqXzf7r17b9+vIGAAMmVTfcc+i2Dw==
angular-router-loader@^0.8.5:
version "0.8.5"
@@ -978,7 +976,6 @@ bonjour@^3.5.0:
bootstrap@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.2.1.tgz#8f8bdca024dbf0e8644da32e918c8a03a90a5757"
- integrity sha512-tt/7vIv3Gm2mnd/WeDx36nfGGHleil0Wg8IeB7eMrVkY0fZ5iTaBisSh8oNANc2IBsCc6vCgCNTIM/IEN0+50Q==
brace-expansion@^1.1.7:
version "1.1.11"
@@ -1232,7 +1229,6 @@ chardet@^0.7.0:
chart.js@2.5.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.5.0.tgz#fe6e751a893769f56e72bee5ad91207e1c592957"
- integrity sha1-/m51Gok3afVucr7lrZEgfhxZKVc=
dependencies:
chartjs-color "^2.0.0"
moment "^2.10.6"
@@ -1240,14 +1236,12 @@ chart.js@2.5.0:
chartjs-color-string@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz#8d3752d8581d86687c35bfe2cb80ac5213ceb8c1"
- integrity sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==
dependencies:
color-name "^1.0.0"
chartjs-color@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
- integrity sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=
dependencies:
chartjs-color-string "^0.5.0"
color-convert "^0.5.3"
@@ -1390,7 +1384,6 @@ collection-visit@^1.0.0:
color-convert@^0.5.3:
version "0.5.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
- integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
color-convert@^1.9.0:
version "1.9.3"
@@ -1405,7 +1398,6 @@ color-name@1.1.3:
color-name@^1.0.0:
version "1.1.4"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
- integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
combined-stream@^1.0.6, combined-stream@~1.0.6:
version "1.0.7"
@@ -2397,7 +2389,6 @@ follow-redirects@^1.0.0:
font-awesome@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
- integrity sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=
for-in@^0.1.3:
version "0.1.8"
@@ -2645,7 +2636,6 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2:
hammerjs@^2.0.8:
version "2.0.8"
resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
- integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
handle-thing@^1.2.5:
version "1.2.5"
@@ -3965,6 +3955,16 @@ next-tick@1:
version "1.0.0"
resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
+ng-auto-complete@^4.1.4:
+ version "4.1.4"
+ resolved "https://registry.yarnpkg.com/ng-auto-complete/-/ng-auto-complete-4.1.4.tgz#f7b73d1f426d4de1c236b771f984f3d2da51b5fa"
+ dependencies:
+ tslib "^1.9.0"
+
+ng2-completer@^2.0.8:
+ version "2.0.8"
+ resolved "https://registry.yarnpkg.com/ng2-completer/-/ng2-completer-2.0.8.tgz#36101eb5a796f966897e7894fc437effd88ebdfb"
+
ng2-cookies@^1.0.12:
version "1.0.12"
resolved "https://registry.yarnpkg.com/ng2-cookies/-/ng2-cookies-1.0.12.tgz#3f3e613e0137b0649b705c678074b4bd08149ccc"