An angular package for a very simple yet powerful autocomplete component

Simple selection	Multiple selection (with grouping)

Simple selection	Multiple selection

You can find a live demo here

1. Run inside your terminal npm i slarn-autocomplete
   
2. Add SlarnAutocompleteModule to app.module.ts:
   

import { SlarnAutocompleteModule } from 'slarn-autocomplete';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, SlarnAutocompleteModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Select a theme:
   

/*Import material design theme*/
@import '~slarn-autocomplete/themes/material.css';

/*Import default theme*/
@import '~slarn-autocomplete/themes/default.css';

If you want to change the default bottom border color and animation copy/paste this in the style.css file and change the colors as you want:

.slarn-autocomplete-container{
  background-image:
    /* color of the bottom border when animated */
    linear-gradient(to bottom, red, red),
    /* color of the bottom border without animation */
    linear-gradient(to bottom, black, black)
  ;
}

4. Now call the component in your template
   

<slarn-autocomplete 
  [configurtion]="myConfig" 
  (onItemSelected)="doSomething($event)">
</slarn-automplete>

SlarnAutocomplete works on two modes:

1. Locally: Filter through explicitly given array of objects
2. Remotely: You just give the url of your api and the autocomplete send a GET request to this url with a specific param called ac-reg that contains the word written in the autocomplete (which means you need to create a function in your api that get the autocomplete param and return an array of objects)

And in both cases you need to provide a configuration object to the autocomplete.

Since SlarnAutocomplete works on two modes we need to provide a configuration for each one ACLocalConfiguration or ACRemoteConfiguration

In app.component.ts:

slarn_local_config: ACLocalConfiguration = {
    template: `
      <div><strong>#name#</strong></div>
      <div>#description#</div>
    `,
    key: 'code',
    value: 'name',
    data: [
      {
        code: 'OP1',
        name: 'Option 1',
        description: 'Some discription here for Option 1'
      },
      {
        code: 'OP2',
        name: 'Option 2',
        description: 'Some discription here for Option 2'
      },
      {
        code: 'OP3',
        name: 'Options 3',
        description: 'Some discription here for Option 3'
      }
    ]
};

In app.component.html:

<slarn-autocomplete 
    [configuration]="slarn_local_config">
</slarn-autocomplete>

In app.component.ts:

slarn_remote_config: ACRemoteConfiguration = {
    template: `
      <div><strong>#name#</strong></div>
      <div>#description#</div>
    `,
    key: 'code',
    value: 'name',
    url: 'path/to/your/api'
};

In app.component.html:

<slarn-autocomplete 
    [configuration]="slarn_remote_config">
</slarn-autocomplete>

SlarnAutocomplete provides a selection event that will be triggered whenever you select an option or clear the autocomplete's input:

<slarn-autocomplete 
    [configuration]="myConfig" 
    (onItemSelected)="doSomething($event)">
</slarn-autocomplete>

The selected item will be the full object:

doSomething(item: any){
    console.log(JSON.stringify(item));// result: { code: 'OP3', name: 'Options 3', description: 'Some discription here for Option 3' }
}

To pre-select an item you just need to provide it's key (or an array of keys in case of multiple selection) to the autocomplete:

<slarn-autocomplete [selectedId]="mySelectedObject.id"></slarn-autocomplete>

or

<slarn-autocomplete [selectedId]="[1,2]"></slarn-autocomplete>

of course it's based on the key you already gave in the configuration.
If the autocomplete is inside a form then you don't need to use selectedId input you just need to fill the formControl or bind it an ngModel

<slarn-autocomplete formControlName="ac_control"></slarn-autocomplete>

in app.component.ts:

form.get('ac_control').setValue('myKeyValue');

or using ngModel

<slarn-autocomplete [(ngModel)]="myAttribute"></slarn-autocomplete>

When there is no data found after typing, SlarnAutocomplete will render No match found! text .
But if you want to render a template of your own you can use ng-container inside slarn-autocomplete with empty-result-view class:

<slarn-autocomplete
  #firstAutocomplete
  [configuration]="local_config"
  (onItemSelected)="selected_locally = $event">
  <ng-container class="empty-result-view">
    <div style="text-align: center">
      <strong>We can't find what you're looking for!</strong><br>
      <!--As you can see you can render buttons and do some stuff-->
      <!--Of course you need to create the 'addItem()' function in your component-->
      <button (click)="addItem()">Add this new item</button>
    </div>
  </ng-container>
</slarn-autocomplete>

This project is under MIT License