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 callfocus(elementId :string)
method.Example: :
constructor(private service: NovaSearchService){ }
this.service.focus('element-id');