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，它会显示“单词”。如果我试图将地址栏中的“单词”更改为“其他单词”，则不会显示任何内容 - 我必须重新加载页面以获取结果或者只需打开新的选项卡/窗口。我不知道为什么以前的代码不起作用。可能这是我的错误 - 我不知道。