Nobody Pays (for) Magazines

    search-field
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.6 • Public • Published

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

    Install

    npm i search-field

    DownloadsWeekly Downloads

    56

    Version

    0.1.6

    License

    ISC

    Unpacked Size

    61.4 kB

    Total Files

    14

    Last publish

    Collaborators

    • wavecoders