https://github.com/shahabganji/aurelia-fusejs

This is an Aurelia plugin in which there is two value converters in order to use fusejs.
https://github.com/shahabganji/aurelia-fusejs

aurelia fusejs

Last synced: about 1 month ago
JSON representation

This is an Aurelia plugin in which there is two value converters in order to use fusejs.

• Host: GitHub
• URL: https://github.com/shahabganji/aurelia-fusejs
• Owner: shahabganji
• License: mit
• Created: 2017-10-02T08:00:44.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-02T08:01:05.000Z (about 7 years ago)
• Last Synced: 2024-11-11T11:02:50.849Z (about 1 month ago)
• Topics: aurelia, fusejs
• Language: JavaScript
• Homepage:
• Size: 87.9 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# aurelia-fusejs

 This is an [Aurelia](http://aurelia.io/) plugin in which there is two value converters in order to use [fusejs](http://fusejs.io/).

###    1. Installation

* ```npm install aurelia-fusejs --save``` or ```yarn add aurelia-fusejs```

* add the following line in your aurelia startup file

    ```javascript

    .plugin('aurelia-fusejs');

    ``` 

    if you use ```webpack``` use

    ```javascript

     .plugin(PLATFORM.moduleName('aurelia-fusejs'));

    ```

###    2. Usage

There are two value converters in this plugin for fusejs

* ### ```fuse```

    Should be applied on an **```array```** of objects and should be provided two parameters as input for it: your fuzzy search options which must be of type **```FuseOptions```** and the **```criteria```** that is your searching string.

    

    ```html

    


        


            ${book.title}

        

    


    ```

    

* ### ```fuseHighlight```


    Had you provided **```includeMatches: true```** in your fusejs options, you can use the ```fuseHighlight``` value converter to get highlighted values based on the ```css``` class you pass to it as an input. Having done this way, you will get an extra property on your **item** property of fusejs resuls named *highlighted* which includes keys for the search result, the usage is like following:

    

    ```javascript

        this.options = {

            //Omitted code

            includeMatches: true,

            keys: [{

                    name: 'title',

                    weight: 0.3

                }, {

                    name: 'author.lastName',

                    weight: 0.7

                }]

            //Omitted code

        };

    ```

    

    ```css

    

        .my-highlight{

            color:'#753B85';

        }

    

    ```

    ```html

    


        


            

            ->

            ${book.item.author.firstName} 

            

        



    

    ```

    

* Bear  in mind that if the key of an item does not match the criteria the ```highlighted.property``` name will be null, thus you should handle it with coalesce operator in your code

    ```html

    

    

    

    ```