Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maleblond/angular-fusejs
Angular 2 plugin using fuse.js to search through a list of elements with a string. Supports highlight.
https://github.com/maleblond/angular-fusejs
angular angular2 fusejs fuzy-search search
Last synced: about 1 month ago
JSON representation
Angular 2 plugin using fuse.js to search through a list of elements with a string. Supports highlight.
- Host: GitHub
- URL: https://github.com/maleblond/angular-fusejs
- Owner: maleblond
- License: mit
- Created: 2016-07-24T19:02:35.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-04-27T23:31:34.000Z (over 3 years ago)
- Last Synced: 2024-10-02T15:19:13.222Z (3 months ago)
- Topics: angular, angular2, fusejs, fuzy-search, search
- Language: TypeScript
- Homepage: https://maleblond.github.io/angular-fusejs/
- Size: 1.14 MB
- Stars: 4
- Watchers: 2
- Forks: 10
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular fuse.js
Angular module using [fuse.js](http://fusejs.io/) to fuzzy-search through a list of objects.
Also easily **highlight** matched terms which is the true added value of this module.
Demo:
## How to install?
This module is available through npm. It is compatible with module bundlers (webpack / browserify ...).
1. `npm install angular-fusejs`
2. Import `FusejsModule` into your module:
```
import {FusejsModule} from 'angular-fusejs'
@NgModule({
imports: [
...
FusejsModule,
],
...
})
```
## How to use?
### Filter elements in a *ngFor
Use `fusejs` pipe in a *ngFor to search through a list of elements. Pass search string as first parameter. Pass fusejs option object as second parameter (optional):
```
```
Params:
- Array(required): Array of objects to search in
- String(optional): search string
- Object(optional): options (see below)
#### Options
Supports all fusejs options (see ) and also those:
- **supportHighlight** (boolean), defaults to true: Whether or not to include highlight info in returning object. If set to false, it will just call FuseJS search, without any additional processing.
- **minSearchTermLength** (number), defaults to 3: Minimal search string length. If length is less than this value, FuseJS will not be called.
- **fusejsHighlightKey** (string), defaults to 'fuseJsHighlighted': Key under which the highlighted results will be stored in the objects of the array. You probably do not need to change this.
- **fusejsScoreKey** (string), defaults to 'fuseJsHighlighted': Key under which the fuse.js returned score will be stored in the objects of the array. You probably do not need to change this.
By default, here are the options set by angular-fusejs:
```
{
supportHighlight: true,
shouldSort: false,
threshold: 0.6,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 2,
includeScore: true,
minSearchTermLength: 3,
fusejsHighlightKey: 'fuseJsHighlighted',
fusejsScoreKey: 'fuseJsScore',
}
```
You can override those default options by injecting `FusejsService` in your app and setting `FusejsService.defaultOptions` to whatever you want.
### Show highlighted terms
```
{{element.fuseJsHighlighted.whateverAttribute}}
```
Replace `whateverAttribute` with your attribute name, trust it as HTML and you are good to go.
## Disclaimer
I made this just for fun, to learn a bit more about fuzzy search + angular. Fuzzy search + detecting what should be highlighted is 100% handled by [fuse.js](http://fusejs.io/).
If you encounter any bug, please check who is the culprit before submitting an issue - it might be a bug in fuse.js library.