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;

以散列方式进行搜索输入。所以我的想法是输入＆＃34; http：// url / #q = word＆＃34;并有＆＃34; word＆＃34;的结果。目前我的＆＃34;哈希函数＆＃34;没用，它什么都不做 - 只是为地址栏增加价值。我怎么能以这种方式让jquery表演？

我尝试添加

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

但它没有帮助。或者我以前做错了。

Answer 1

试试这个

$(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 2

所以......可能太难了，但它确实有效：

$(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 3

这就是接近一切正常的方式：我在索引中有什么：

 $(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 必要的语言来自cookie - 因此它非常方便。唯一的小问题是在你的脚本中（因为我已经完成了你的脚本编写）search_term在地址栏中的变化。我会试着解释一下。如果我使用链接127.0.0.1/dictionary/#word，则显示“word”。如果我尝试将地址栏“word”更改为“other word”，则不显示任何内容 - 我必须重新加载页面才能获得结果或只是打开一个新的选项卡/窗口。我不知道为什么以前的代码不起作用。愿这是我的错 - 我不知道。

Jquery搜索和哈希

3 个答案: