jquery搜索和散列

Question

如何使用散列進行實時搜索？ 現在我有一個簡單的jQuery搜索：

$(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();  
            } 
        });  
     }); 
}); 

正如你看到的，我已經在這裏

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

加入到在哈希搜索輸入。所以我的想法是輸入「http：// url /＃q = word」，並得到「word」的結果。目前，我的「散列函數」是無用的，它什麼都不執行 - 只是增加了地址欄的價值。我怎麼能讓jquery以這種方式執行？

我嘗試添加

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

，但它並不能幫助。或者我曾經錯誤地做過。

Answer 1

所以..可能是實在是太難了，但它的工作原理：

$(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();  
      } 
     }); 
    } 
}); 

在PHP：

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

Answer 2

試試這個

$(function(){ 
    $("form#search-form").submit(function(e){  
     e.preventDefault(); 
     var hash = 'q=' + encodeURI(document.getElementById('q').value); 
     window.location.hash = hash; 
     search(); 
    }); 

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

    function search() { 
     var search = window.location.hash.replace('#q=',''); 

     $.ajax({ 
      type:"GET", 
      data: { 'search' : search }, 
      url: "test2.php", 
      success: function(msg){ 
       $("#results").html(msg).fadeIn();  
      } 
     }); 
    } 
}); 

爲了獲得更好的性能使用jquery.hashchange插件

Answer 3

這是t他路怎麼附近的一切工作正常： 我有什麼指標：

$(document).ready(function() { 

    $("form#search-form").submit(function(e){  
     e.preventDefault(); 
     var hash = '' + encodeURI(document.getElementById('q').value); 
     window.location.hash = hash; 

     $("#results").fadeOut(); 
     $.ajax({ 
      type:"GET", 
      data: $(this).serialize(), 
      url: "search.php", 
      success: function(msg){ 
         $("#results").html(msg).fadeIn();  
      } 
     });  
    }); 

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

function s() { 
    var s = window.location.hash.replace('#',''); 

    if($('#language1').attr('checked')===true) { 
    var lang = 'language1'; 
    } 
    else if($('#language2').attr('checked')===true) { 
    var lang = 'language2'; 
    } 
    else if($('#language3').attr('checked')===true) { 
    var lang = 'language3'; 
    } 

    $.ajax({ 
     type:"GET", 
     data: { 's' : s, language : lang}, 
     url: "search.php", 
     success: function(msg){ 
      $("#results").html(msg).fadeIn();  
     } 
    }); 
}  


}); 

在PHP：

$search = filter_var($_GET["s"], FILTER_SANITIZE_STRING); 
$search_term = urldecode($search); 

所以，地址欄的樣子：127.0.0.1/dictionary/#search_term 一個必要語言來自cookies - 所以它非常方便。唯一的小問題就像在你的腳本中（因爲我已經完成了你的腳本），search_term在地址欄中改變。我會盡力解釋這一點。如果我使用鏈接127.0.0.1/dictionary/#word，它會顯示「單詞」。如果我試圖將地址欄中的「單詞」更改爲「其他單詞」，則不會顯示任何內容 - 我必須重新加載頁面以獲取結果或者只需打開新的選項卡/窗口。我不知道爲什麼以前的代碼不起作用。可能這是我的錯誤 - 我不知道。