https://github.com/oskarrough/ember-jets

An Ember Addon for Jets.js that makes it easy to search lists in the DOM
https://github.com/oskarrough/ember-jets

ember ember-addon search

Last synced: 9 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/oskarrough/ember-jets
• Owner: oskarrough
• License: mit
• Created: 2017-06-13T08:03:33.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-25T18:57:47.000Z (over 6 years ago)
• Last Synced: 2024-10-15T07:48:17.767Z (22 days ago)
• Topics: ember, ember-addon, search
• Language: JavaScript
• Homepage: https://ember-jets.netlify.com
• Size: 144 KB
• Stars: 5
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-jets

[![Build Status](https://travis-ci.org/oskarrough/ember-jets.svg?branch=master)](https://travis-ci.org/oskarrough/ember-jets)

An Ember.js component to search and filter lists with CSS inline using [Jets.js](https://jets.js.org). Here's a [demo](https://ember-jets.netlify.com/).

## Usage

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

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

```hbs

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



  {{#each model as |item|}}

    


      {{item}}

    

  {{/each}}



```


### 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:

```hbs

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



  {{#each model as |item|}}

    


      
{{item}} this will be searched

      
This will NOT be searched

    

  {{/each}}



```


## Collaborating

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

### Installation

* `git clone ` this repository

* `cd ember-jets`

* `yarn install`

### Running

 * `ember serve`

 * Visit your app at [http://localhost:4200](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](http://localhost:4200).