Best approach to implement ajax urls/browser history on a custom joomla component

Question

I was assigned a task to modify a custom joomla component's search functionality that is only done through ajax, and doesn't have any url/query string handling, so the users cannot go to previous searches through browser back button as well as it is impossible to bookmark a specific search query for sharing etc.

Currently, the search is done by a jquery script that collects all of the form elements' selected values on the page and sends that (with ajax) to a separate controller task (ajax.ajaxSearch) which echoes json with all available results. In the view then there is a code that parses that json and builds an ul list for all items. And the url stays always the same (it's the homepage currently).

What I was thinking to do is in the script that receives the items from the model, to set some history handling ie:

var params = '&beds=2&fireplace=1&kitchen=1';
history.pushState(params, null, '?task=search'+params);

With this I will have urls like www.mysite.com/properties/?task=search&beds=2&fireplace=1&kitchen=1 with back button working and params will be saved in the window.state object which hopefully I could use to re-run the ajax search query with the selected params. And I know I will have to code couple of methods that will take care of such routes like www.mysite.com/properties/?task=search&beds=2&fireplace=1&kitchen=1 to be properly handled when accessed directly.

What I want to know is the approach described above feasible to go after? Is there a maybe better solution that could solve this problem more elegantly and easily ? What would your approach be if faced with similar task?

Answer 1

You can try some history frameworks but anyway if you want the back button to work you need an anchor to move back and foward. I don't see why it shouldn't work.