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([])
  }),
)