nova-search

Search box for angular 2+ applications which can filter any item set with or without accents in different languages like Spanish, Portugese, French etc.

Usage no npm install needed!

<script type="module">
  import novaSearch from 'https://cdn.skypack.dev/nova-search';
</script>

README

Nova Search

Search box for angular 2+ applications which can filter any item set with or without accents in different languages like Spanish, Portugese, French etc.

Features

  • Search dropdown list.

  • Skip/allow language accents while searching.

  • Angular reactive forms support.

  • Angular 2 and above supported.

  • Cross browser support.

  • Check it out demo

Installation

Run `npm install nova-search`

Configuration

  • Import NovaSearchModule into your app.module.

    import { NovaSearchModule } from 'nova-search';

    @NgModule({ imports: [ ..., NovaSearchModule ], ... })

  • Use nova-search component inside your HTML and pass values for inputs. Example:

    <nova-search [items]="itemList" [options]="{ key:'value', display:'value' }" [disabled]="false" [skipAccents]="false" [inputCss]="'custom-css-1'" [optionCss]="'custom-css-2'" [control]="formGroup.controls.search" [elementId]="'nova-search-element'" [skipCharactersCount]="1" [placeholder]="'search here'" (onItemSelected)="onItemSelected($event)"></nova-search>

  • Add a css class named 'bold' globally to make matched letters more readable while searching.

    .bold { font-weight: bold; }

Input

Name Type Description
items any[] Search item list required
options { key : string, display : string } 'key' is the property name which will be used to filter item set while 'display' will be the property which will appear in search results required
control FormControl Angular form control required
disabled boolean Disable/Enable input optional
elementId string HTML element id (if you need mutiple nova-search instances in the same page) optional
placeholder string Input placeholder optional
inputCss string Css class names for search box element Ex: [inputCss]="'class-1 class-2'" optional
optionCss string Css class names for search results section Ex: [optionCss]="'class-1 class-2'" optional
skipAccents boolean A boolean property which is to toggle whether user wants to skip accents while searching or not. (default value is set to false) optional
skipCharactersCount number Number of characters to skip before start the search optional

Output

Name Type Description
( onItemSelected ) any Change event when user clicks on a search result
( onClearText ) void Change event when user clears input text

Services & Methods

  • Inject NovaSearchService service and call focus(elementId :string) method.

  • Example: :

    constructor(private service: NovaSearchService){ }

    this.service.focus('element-id');