jQuery autocomplete and back button behaviour?

I'm using the awesome jQuery autocomplete plugin. However I'm a bit of a newbie when it comes to understanding browser behaviour and Ajax, so I have a question.

This is the sequence of events:

1. User types 'fish' into text box
2. User chooses book title from list of autocomplete options - Fish Farming, Fish Frying, etc
3. HTML loads on page (as ajax) - 'click here for Fish Farming'
4. User clicks on link and loads Fish Farming page
5. User decides Fish Farming isn't for 开发者_运维知识库them, clicks on 'back' button - and returns to an empty page!

How can I change this so that when the user returns to the home page, they see the Fish Farming html - the page they were just looking at?

This is my autocomplete code:

    // Autocomplete listener.
    $("#q").catcomplete({
            source: "/book_results",
            select: function(event,ui) {
                $('#book_results').html(load_img);
                if (ui.item.category=="Books") { 
                    $.bbq.removeState();
                    var paramsObj = { 'b' : ui.item.id };
                    $.bbq.pushState( paramsObj );
                    get_books(null, null, null, ui.item.id);
                } else {
                    $.bbq.removeState();
                    var paramsObj = { 's' : ui.item.id };
                    $.bbq.pushState( paramsObj );
                    get_books(null, ui.item.id, null);
                }
            }
    });

As you can see, I'm already using the BBQ plugin to update the URL fragment when the user chooses something from autocomplete, just because it seemed like a good idea.

So I have my book_id set in the hash - but how can I ensure that the relevant HTML loads when the user clicks Back?

Thanks!

As the user makes choices append anchors to URI or session state.

Make new events for the back and forward buttons and traverse the lists accordingly.