Making an advanced search with ember


#1

Hi

I am prototyping a new feature for our site alpha.sonatribe.com - we want to improve the lineup feature for when users are looking at an event and want to browse through the artists.

Looking though the docs and reading up on a lot of tutorials I can see how to call my API and pull back an initial set of results.

I have now hit a couple of stumbling blocks where by I want to construct the query string used to query the API as it uses a format like:

?filters=name:,artists.tags:electronic|house|jungle,location.name:other,usersAttending.usernames:&Query=&Skip=0&Take=10&orderBy=-popularity

I have documented most of the params here: http://conversations.sonatribe.com/t/sonatribe-lineups-api/23

I am guessing that using ember-data isn’t going to be the one here as it is very opinionated and very REST/CRUD? I hope I am wrong here but looking at my URLs and looking at how ember-data assumes it will query for things I get the feeling it’s not really made for this sort of querying?

Also, at the moment the data is initialized in the route:

export default Ember.Route.extend({
  model: function(){
    var store = this.store;
    return store.find('lineup', { filters: "location.name:pyra*", skip: 0, take:10});
  }
});

You can see I am using ember-data here and having to do weird stuff to get the query correct.

Anyway - I am also stuck trying to figure out how I wire it up so that when the user types in the search box I can request the data from the API?

I think part of the problem is that ember does a lot more for me that I was expecting so a lot of it feels like magic and I end up trying to over complicate the issue - I have spent a good amount of time reading up on this and trying to understand it as well as watching various videos but I think my use case is a little left field?


#2

Hi @Wayne_Douglas,

Give Query Params a shot, they come very very in handy to implement search features and persist the state in the URL.

A few weeks ago I spent some time playing with them. I implemented exactly what you are looking for: a type as you search (on the server side). Please, find on vicentereig/hola-apps the source. Also deployed to Heroku: http://hola-apps.herokuapp.com/apps/search?term=new%20relic

I’m not using a debounced event, but spawning a request per character and canceling all the pending requests. I found this snippet somewhere on the Internets and copy and pasted into my Store: https://github.com/vicentereig/hola-apps/blob/master/app/assets/javascripts/application/store.js#L8-L15

animated GIF below

As a side-note, I implemented as close as possible same functionality in AngularJS. It was fun to implement a similar Store in Angular. Also the same app, using same server-side API in Angular.

But, again, Ember Query Params are an excellent and nothing compares to Ember Router.

Any questions, do not hesitate dropping them here.

Cheers, Vicente.