I just started looking at Backbone.js. Now i wan't to create a simple search similar to google where the url updates "on the go". So if you submit a form i want the url to update to .

I appreciate every answer :)

I just started looking at Backbone.js. Now i wan't to create a simple search similar to google where the url updates "on the go". So if you submit a form i want the url to update to http://www.site./#/search/I-searched-for-something.

I appreciate every answer :)

• javascript
• search
• backbone.js

Share Improve this question Follow asked Jul 5, 2011 at 20:02 EmilEmil 1511 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

If I understand the question, you want an arbitrary URL that includes your search term as part of the URL. And I suspect that your problem is you don't see how to do that with the routes architecture.

Routes are nothing but regular expressions:

var MyController = Backbone.Controller.extend({
    routes: {
        RegExp('^search/(.*)$'): "handle_search"
    },

    handle_search: function(search_term) {
        search_term = decodeURIComponent(search_term);
        /* Do something ajaxy with the search term in the search model,
           which in turn triggers the search view to refresh... */
    }
});

After that, you would apply a click handler to the button on the search form (or maybe a keypress==13 manager to the search field itself) that, instead of actually doing anything, just sets window.location.hash = escapeURIComponent($('#search_field').val())

It's roundabout, but it gets the job done. Your URLs will be ugly with all the %XX's in them, but they'll all be bookmarkable, which is the only reason to do something like this.

Emil, I think I have a similar use case to you where users could make selections and then trigger a search. I want that search to be updated in the address bar so it can be bookmarked. To update the address bar, I was planning on using Backbone navigate

For multiple search terms I plan to 1. set them as values in my the collection and then trigger a fetch on the collection 2. ask the collection for the url and update the address bar using navigate.