Question

How is it possible to make live-search with hashes?
Now I have a simple jquery search:

 $(function(){
/// Start searching
       $("form#search-form").submit(function(e){     
          var hash = 'q=' + encodeURI(document.getElementById('q').value); 
          window.location.hash = hash;
          e.preventDefault();
          $("#results").fadeOut();
            $.ajax({
               type:"GET",
               data: $(this).serialize(),
               url: "search.php",
               success: function(msg){
                      $("#results").html(msg).fadeIn();      
                                     }
                    });     
        }); 
}); 

As you see, I have added here

 var hash = 'q=' + encodeURI(document.getElementById('q').value); 
 window.location.hash = hash;

to have search-input in hash. So my idea is to type “http://url/#q=word” and have results for “word”. Currently my “hash function” is useless, it performs nothing – just adds value to address bar. How could I make jquery perform in that way?

I tried to add

 if (window.location.hash != "") {
}

but it doesn’t help. Or I used to do that wrongly.

Answer 1

So.. may be it is too difficult, but it works:

$(function(){
    $("form#search-form").submit(function(e){     
        e.preventDefault();
        var hash = 'search=' + $('#q').val() + '&lang=' + $('.lang:checked').val(); // radio-buttons have class="lang"
        window.location.hash = hash;
        search();
    });

    if (window.location.hash != "") {
        search()
    }

    function search() {
        var hash_arr = window.location.hash.substr(1).split('&'),
            values = new Array(),
            i = 0,
            json = '{';

        for (var key in hash_arr) {
            values = hash_arr[key].split('=');
            if (i++ != 0) json += ',';
            json += '"' + values[0] + '":"' + values[1] + '"';
        }

        json += '}';

        $("#results").fadeOut();
        $.ajax({
            type:"POST",
            data: { data : json },
            url: "test2.php",
            success: function(msg){
                $("#results").html(msg).fadeIn();      
            }
        });
    }
});

In PHP:

$data = (array)json_decode($_POST['data']);
$search = $data['search'];
$language = $data['language'];