umens / ngx-magicsearch

Magic Search/Faceted Search Library for Angular 2

ngx-magicsearch

Branch	Build Status	Dependency Status	devDependency Status	Version
Master				2.2.0
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

ngx-magicsearch's Issues

Multiple parameters support

Hi, is it possible to have multi values for a facet?
Say, [ platform: Linux, Windows, Mac ]

It is a cool UI.
Thanks.

Can't bind to 'facets_param' since it isn't a known property of 'ngx-magic-search'.

pls help me to resolve this issue

Write Tests

Remove facet

When I remove one facet, every facet is removed.

Seems to be something wrong with removeFacet function.

add the possibility to add or remove a term with a function

remove blue box on focus

If you want to remove the blue browser focus on the text box like the ng1 version use:

input:focus {
    outline-width: 0;
}

Publish v1.0.0

make possible to load the component with preselected terms

Error to load

I have this error in my console and html not load
Uncaught SyntaxError: Unexpected token import

Can't import module in Angular 2 V4 (CLI)

I tried to import the module like this:

import { NgxMagicSearchBarModule } from 'ngx-magicsearch';

But the module has no exporting member with that name.
I tried added the index file to scripts in angular-cli.json, but that did not help.