github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-19 21:03:17 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Got the search properly working !wip

Browse source
This commit is contained in:
tidusjar 2019-01-26 13:43:39 +00:00
commit ce33a4212d
3 changed files with 17 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/Ombi/ClientApp/src/app/my-nav/nav-search.component.html
View file

@ -1,15 +1,14 @@
<mat-form-field class="quater-width"> <mat-form-field class="quater-width">
<input [(ngModel)]="searchText" (keyup)="search($event)" matInput [matAutocomplete]="auto"> <input [(ngModel)]="searchText" (keyup)="search($event)" matInput [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"> <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let option of searchResult" [value]="option"> <mat-option *ngFor="let result of searchResult" [value]="result">
<img src="https://image.tmdb.org/t/p/w92/{{option.poster_path}}" class="autocomplete-img" aria-hidden/> <img src="https://image.tmdb.org/t/p/w92/{{result.poster_path}}" class="autocomplete-img" aria-hidden/>
<span *ngIf="option.media_type == 'tv'"> <span *ngIf="result.media_type == 'tv'">
{{option.name}} {{result.name}}
</span> </span>
<span *ngIf="option.media_type == 'movie'"> <span *ngIf="result.media_type == 'movie'">
{{option.title}} {{result.title}}
</span> </span>
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
</mat-form-field> </mat-form-field>
</mat-toolbar>

2
src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss
View file

@ -1,5 +1,5 @@
.quater-width { .quater-width {
width: 25%; width: 25em;
} }
.autocomplete-img { .autocomplete-img {

12
src/Ombi/ClientApp/src/app/my-nav/nav-search.component.ts
View file

@ -1,10 +1,10 @@
import { Component, Input } from '@angular/core'; import { Component, Input } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; import { Subject } from 'rxjs';
import { Observable, Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { SearchV2Service } from '../services/searchV2.service'; import { SearchV2Service } from '../services/searchV2.service';
import { IMultiSearchResult } from '../interfaces'; import { IMultiSearchResult } from '../interfaces';
import { MatAutocompleteSelectedEvent } from '@angular/material';
@Component({ @Component({
selector: 'app-nav-search', selector: 'app-nav-search',
@ -16,7 +16,6 @@ export class NavSearchComponent {
public searchChanged: Subject<string> = new Subject<string>(); public searchChanged: Subject<string> = new Subject<string>();
public searchText: string; public searchText: string;
public searchResult: IMultiSearchResult[]; public searchResult: IMultiSearchResult[];
public option: IMultiSearchResult;
constructor(private searchService: SearchV2Service) { constructor(private searchService: SearchV2Service) {
this.searchChanged.pipe( this.searchChanged.pipe(
@ -31,4 +30,9 @@ export class NavSearchComponent {
public search(text: any) { public search(text: any) {
this.searchChanged.next(text.target.value); this.searchChanged.next(text.target.value);
} }
public selected(option: MatAutocompleteSelectedEvent) {
var selected = option.option.value as IMultiSearchResult;
}
} }