Route/template architecture for simple search

Hi, I’m trying to implement a search engine type home page very similar to the one on this site.

I am using query params in both the route and controller to send queries to the backend. The top part of the screen allows the user to enter terms, set a ‘results per page’ value, specify sorting order, etc. - all of these options are converted into query params and sent to the backend. These options and the results themselves are part of a single route and template, called ‘search’.

The problem: when I do a search, the whole template gets refreshed because I am calling ‘refreshModel’ on the route when query params change. The model contains the search results and the results are rendered into the search results area of the ‘search’ template. I need the search options and search term input element to remain static on the screen while the query gets sent to the backend, and to only have the search results section of the template updated when results are returned from the backend after a query is submitted.

Do I need to have two separate templates to do this? How can I refresh the model without refreshing the entire template?

Take a look at the advanced search options on this site - this behavior is what I am trying to achieve. If I make a change to one of the parameters, the url query params get updated, new results are returned, but the entire screen does not experience a refresh - only the search results get updated. How is this being achieved?


discourse is build in ember so check it

Search fit as a Service other than Model. So if you use the service in your controller it will not be refreshed.

This is very helpful. I dug around in the source and also found the controller and template to give me a lot of clues as to how things are being done. You can see that the ajax call to get search results is actually being made in the controller itself, inside the _search() function.