import { Component } from '@angular/core' ; import { FormControl } from '@angular/forms' ; import { Observable , of , throwError as _throw , timer } from 'rxjs' ; import { delayWhen } from 'rxjs/operators' ; import { DataSource , OptionEntry } from '@oasisdigital/angular-material-search-select' ; import { shortOptions } from '../short-options' ; @ Component ( { selector : 'obs-demo-1-simple-fast' , templateUrl : './demo-1-simple-fast.component.html' , styles : [ ] } ) export class Demo1SimpleFastComponent implements DataSource { ours = new FormControl ( ) ; disableMe = new FormControl ( ) ; options = shortOptions ; constructor ( ) { this . disableMe . valueChanges . subscribe ( dis => dis ? this . ours . disable ( ) : this . ours . enable ( ) ) ; } displayValue ( value ) { console . log ( 'finding display value for' , value ) ; if ( value === '333' ) { return of ( null ) ; } if ( value ) { let display = '' ; value = parseInt ( value , 10 ) ; for ( const idx in this . options ) { if ( this . options [ idx ] && this . options [ idx ] . value === value ) { display = this . options [ idx ] . display ; break ; } } return of ( { value , display , details : { } } ) ; } else { return of ( null ) ; } } search ( term ) { console . log ( 'searching for' , term ) ; if ( term === 'error' ) { return _throw ( 'testing' ) ; } const lowerTerm = typeof term === 'string' ? term . toLowerCase ( ) : '' ; return of ( this . options . filter ( option => option . display . toLowerCase ( ) . indexOf ( lowerTerm ) >= 0 ) ) . pipe ( delayWhen ( event => timer ( Math . random ( ) * 300 + 100 ) ) ) ; } match ( search , entry ) { return ( ( entry . display && search . toLowerCase ( ) === entry . display . toLowerCase ( ) ) || false ) ; } }