ember-jets

An Ember.js component to search and filter lists with CSS inline using Jets.js. Here's a demo.

Usage

Inside your ember-cli project, run ember install ember-jets.

Now you have a {{jets-search}} input component. Use it like this:

{{jets-search contentTag="#list" content=model}}

<div id="list">
  {{#each model as |item|}}
    <div>
      {{item}}
    </div>
  {{/each}}
</div>

Options

• contentTag - CSS selector for the DOM container you want to search (required)
• content - Array to observe for changes. For instance your model array. This will make sure the search is synced with your content (optional)
• filter - CSS selector if you want to specify what to search in each row (optional)
• wait number in milliseconds to debounce/wait before triggering search (optional, not enabled by default)

Here's an example with filtering:

{{jets-search contentTag="#list" items=model filter="h1"}}

<div id="list">
  {{#each model as |item|}}
    <div>
      <h1>{{item}} this will be searched</h1>
      <p>This will NOT be searched</p>
    </div>
  {{/each}}
</div>

Collaborating

The below outlines the details of collaborating on this Ember addon.

Installation

• git clone <repository-url> this repository
• cd ember-jets
• yarn install

Running

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

Linting

• npm run lint:js
• npm run lint:js -- --fix

Running tests

• ember test – Runs the test suite on the current Ember version
• ember test --server – Runs the test suite in "watch mode"
• npm test – Runs ember try:each to test your addon against multiple Ember versions

Running the demo/dummy application

• ember serve
• Visit the dummy application at http://localhost:4200.