ngx-magicsearch

| Branch | Build Status | Dependency Status | devDependency Status | Version | | ---------------------|------------------------|----------------------|------------------------|:----------------------:| | Master | | | | 2.1.1 | | Develop | | | | - |

Magic Search/Faceted Search Library for Angular 2 project

• use v1* for angular 2
• use v2.* for angular 4

Getting Started

Use v1 for angular 2 v2 and v2 for angular 2 v4

These instructions are here to set up the library in your project.

See Contributing for instructions that will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• An Angular 2 project obviously :)
• Font-Awesome

Installing

You can install ngx-magicsearch by using npm.

npm install ngx-magicsearch --save

or

yarn add ngx-magicsearch

Add NgxMagicSearchModule to your module, eg.

import { NgxMagicSearchModule } from 'ngx-magicsearch';

@NgModule({
  imports: [ NgxMagicSearchModule ]
  // ...
})
export class AppModule {
}

Docs

And you can use selector ngx-magic-search in your template. HTML

<ngx-magic-search [strings]="lang" [facets_param]="choices" (textSearchEvent)="textSearch($event)" (searchUpdatedEvent)="searchUpdated($event)"></ngx-magic-search>

Plugin options

[facets_param] - object

Array<{name: string, label: string, options: Array<{key: string, label: string}>}>

Array of your filters - see example below

[strings] - object - optionnal

{remove: string, cancel: string, prompt: string, text: string}

Default value :

• remove : 'Remove facet'
• cancel : 'Clear search'
• prompt: 'Select facets or enter text'
• 'text': 'Text'

For Internationalization(i18n) purpose.

(searchUpdatedEvent) - Event

Event fire when user select a new search term. Return an array of type

Array<{key: string, values: Array<string>}>

Where

• key = facets_param.name
• value = facets_param.options.key

(textSearchEvent) - Event

Event fire when user make a search with a text. Return a string

Usage/Example

JavaScript

choices = [
  {
    'name': 'owner_alias',
    'label': 'Images owned by',
    'options': [
      {'key': '', 'label': 'Anyone'},
      {'key': 'self', 'label': 'Me (or shared with me)'}
    ]
  },
  {
    'name': 'platform',
    'label': 'Platform',
    'options': [
      {'key': 'linux', 'label': 'Linux'},
      {'key': 'windows', 'label': 'Windows'}
    ]
  },
  {
    'name': 'architecture',
    'label': 'Architecture',
    'options': [
      {'key': 'x86_64', 'label': '64-bit'},
      {'key': 'i386', 'label': '32-bit'}
    ],
  }
];

searchUpdated(terms) {
	console.log(terms);
};

textSearch(customTerm) {
	console.log(customTerm);
};

And

<ngx-magic-search [facets_param]="choices" (textSearchEvent)="textSearch($event)" (searchUpdatedEvent)="searchUpdated($event)"></ngx-magic-search>

See image above to see the result.

Running the tests

tests

tests are comming !

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

We use SemVer for versioning. For the versions available, see the tags on this repository.

We use Gitflow for the flow.

Authors

• Ulysse Mensa - Initial work - github

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• original project for angular v1 by eucalyptus