Ember: globally-available search component (and action)?

Question

I want to have a search field inside a component that can be placed anywhere in the app. It can appear on any template, or nested in components. The search form would accept user input (search term) and submit would trigger a search action which transitions to a results template.

Seems simple enough, but I can't figure out how to make an action globally available. And if I could, how do you pass the inputted term to the action in the first place? There's surprisingly little info on how to handle form submits with Ember CLI.

Thus far I've just been submitting a regular form with action='/results'. But that's obviously reloading the app.

I've been messing with creating an action in the index controller like this:

export default Ember.Controller.extend(defaultParams, {
    term: '',
    actions: {
        keywordSearch() {
            this.transitionToRoute('results', { queryParams: { q: this.get('term') }});
        }
    }
});

Then passing a closure action down to my search component, which is nested 2 deep from the index template.

index.hbs:

{{index-search keywordSearch=(action "keywordSearch")}}

index-search.hbs (component):

{{search-field keywordSearch=keywordSearch }}

search-field.hbs (nested component):

<form {{ action (action keywordSearch) on='submit' }}>
{{ input value=term }}
<button type="submit">Search</button>
</form>

And that will run the action, but the term is not supplied. How do you supply term to the closure action?

And...do I really need to pass the action down to every single place the search field is going to appear in the app, or is there an easier way to do it?

Answer 1

Instead of writing actions in all components and routes, you can create a service for search. Inject the service into the component and handle the route transition from service method. Check the sample code below,

Search-component.hbs

<form {{ action (action search) on='submit' }}>
{{ input value=keyword }}
<button type="submit">Search</button>
</form>

Search-component.js

export default Ember.Component.extend({

  globalSearch: Ember.inject.service('search'),

  actions: {
    search() {
      const { keyword } = this.getProperties('keyword');
      this.get('globalSearch').showResults(keyword).then(() => {
        alert('Success');
      }, (err) => {
        alert('Error while searching: ' + err.responseText);
      });
    }
  }

});

Service - app/services/search.js

import Ember from 'ember';

export default Ember.Service.extend({

  init() {
    this._super(...arguments);
  },

  showResults(keyword) {
    // write code for transition to search results route here
  }
});