/ember-jets

An Ember Addon for Jets.js that makes it easy to search lists in the DOM

Primary LanguageJavaScriptMIT LicenseMIT

ember-jets

Build Status

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

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