esc

ember-searchable-collection

Simple search component with minimal UI

Showing:

Popularity

Downloads/wk

6

GitHub Stars

5

Maintenance

Last Commit

4yrs ago

Contributors

2

Package

Dependencies

2

Size (min+gzip)

0.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Deprecated!
Please use ember-search-helper instead

Readme

ember-searchable-collection

Build Status

This addon is deprecated. TL;DR: You can use ember-search-helper instead. Slightly longer version: users quickly encountered issues when this addon was so prescriptive about the input component used. I've re-written the functionality as a helper that's hopefully a bit more flexible for your project.

The searchable-collection component offers simple search functionality with a minimal UI.

NOTE: the searchable-collection component uses contextual components, and requires Ember 2.3 or higher.

import Ember from 'ember';

export default Ember.Component.extend({
  fruits: Ember.A(['apples', 'oranges', 'bananas']);
});
{{#searchable-collection fruits as |search|}}
  <p>
    {{!-- search input --}}
    {{search.field}}
  </p>

  <p>
  {{#each search.results as |fruit|}}
    {{fruit}}<br>
  {{/each}}
  </p>
{{/searchable-collection}}

For more complex collection members, we're able to define which properties are queryable using the searchableProperties property:

import Ember from 'ember';

export default Ember.Component.extend({
  fruits: Ember.A([{
    name: 'apples',
    opinion: 'good'
  }, {
    name: 'oranges',
    opinion: 'awesome'
  }, {
    name: 'bananas',
    opinion: 'meh'
  }]),

  searchableProperties: Ember.A(['name', 'opinion'])
});
{{#searchable-collection fruits searchableProperties=searchableProperties as |search|}}
  {{search.field}}

  <p>
  {{#each search.results as |fruit|}}
    {{fruit.name}} ({{fruit.opinion}})<br>
  {{/each}}
  </p>
{{/searchable-collection}}

Installation

  • git clone this repository
  • npm install
  • bower install

Running

  • ember server
  • Visit your app at http://localhost:4200.

Running Tests

  • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://ember-cli.com/.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100