# Best practice for live searching data store

**URL:** <https://discuss.emberjs.com/t/best-practice-for-live-searching-data-store/5555>\
**Category:** Ember Data\
**Created:** [June 6, 2014, 11:28am UTC](https://discuss.emberjs.com/t/best-practice-for-live-searching-data-store/5555 "2014-06-06T11:28:13Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![amk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/amk/32/9116_2.png) [@amk](https://discuss.emberjs.com/u/amk)\
**Post date:** [June 6, 2014, 11:28am UTC](https://discuss.emberjs.com/t/best-practice-for-live-searching-data-store/5555/1 "2014-06-06T11:28:13Z")

</div>

I’m looking for clarification on whether this is the right way to go about searching.

Search page:

```auto
{{input valueBinding="query"}}
{{#each model}}
  {{partial 'searchResult'}}
{{/each}}

```

Search controller:

```auto
Ember.ArrayController.extend
  query: ''

  runQuery: ->
    @store
      .find 'things', query: @get 'query'
      .then (records) =>
        @set 'model', records

  queryObserver: (->
    Ember.run.debounce @, @runQuery, 300
  ).observes 'query'

```

The above produces the desired behaviour - and although ember js prefers _convention over configuration_ it feels like there is still a lot of ways to do the same thing.

Appreciate any thoughts.

---

<div class="post-metadata">

**Author:** ![Spencer\_Price](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/spencer_price/32/14878_2.png) [@Spencer\_Price](https://discuss.emberjs.com/u/Spencer_Price)\
**Post date:** [June 6, 2014, 3:06pm UTC](https://discuss.emberjs.com/t/best-practice-for-live-searching-data-store/5555/2 "2014-06-06T15:06:00Z")

</div>

I think a good rule of thumb is that any time the state of your application changes, it should be handled by the router. In your case, if the user hits refresh, then you’re losing the state of the search.

With the ever-to-be-coming query-params feature, [this will be fairly trivial](http://emberjs.jsbin.com/ucanam/4059)

In the meantime, there’s a few other things you can do. For example, you could serialize the query into a normal URL segment…that could looks something like this:

```
App.Router.map(function() {
  this.route('Search', {path: '/:query'});
});

App.SearchRoute = Ember.Route.extend({
  actions: {
    runQuery: function(query) {
      this.transitionTo('search', this.store.find('things', {query: query}));
    }
  },
  model: function(params) {
    return this.store.find('things', {query: params.query});
  }
});

App.SearchController = Ember.ArrayController.extend({
  query: Em.computed.oneWay('model.query.query'),
  queryObserver: function() {
    Ember.run.debounce(this, 'send', 'runQuery', this.get('query'));
  }.observes('query')
});

```