Search Field

This Angular Module is a search autocomplete input field that can be added to the Material toolbar allowing you to connect your own API search results service and pass in the results. The selected value will ether be the entered value of the selected value from the autocomplete.

The search field may be also used as a formControl to patch values or react to values changed.

The data from the resulting API or other may be an array of objects or observable array of objects. You may specify the value to be used from the object for the autocomplete display.

Search clear for input field added

Installation

npm install search-field

Scaffolding

Import the module into your project under imports

imports: [
    BrowserModule,
    AppRoutingModule,
    SearchFieldModule
  ],

Inputs

The following Inputs are available as a Component (These inputs are not available on Modal types)

Input	Type	Defaut	Description
value	STRING	EMPTY	value to be used from array of objects
data	ANY[]	[]	data for the autocomplete that comes from API
disabled	BOOLEAN	FALSE	disable search

Outputs

The following Outpus are available as a Component (These inputs are not available on Modal types)

Input	Type	Defaut	Description
selectedInput	EVENT	STRING	returns selected input value

Use

The following example places the search field in a Material toolbar as a formControl

<div>
  <mat-toolbar color="primary">
    <app-search-field
    [formControl]="search"
    [data]="searchData"
    [value]="'value'"
    ></app-search-field>
  </mat-toolbar>
</div>

FormControl

formControlName="search"

search = this.fb.control(null)

Then in the init we grab the changes of the formControl to be use for the API

this.search.valueChanges.subscribe(data => {
    console.log(data)
  })

Sample code for search

Bind Observable to data property

<app-search-field
[formControl]="search"
[data]="searchResults$ | async"
[value]="'value'"
></app-search-field>

Then define the Observable behaviour

this.searchResults$ = this.search.valueChanges.pipe(
  switchMap((data: any)=> {
    const search = (data !== null && data.length > 3) ? data : null
    return (search !== null) ?
    this._http.get<any[]>(`https://registry.npmjs.org/-/v1/search?text=${search}`).pipe(
      map((data:any) => data.objects.map((item:any) => {
        return { value: item.package.name, id: IDUtils.id() }
      } ))
    )
    : of([])
  }),
)