Got the search properly working !wip

pull/3895/head
tidusjar 6 years ago
parent b38cfbc091
commit ce33a4212d

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

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

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

Loading…
Cancel
Save