1

如何使用哈希进行实时搜索？现在我有一个简单的 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 != "") {
}

但这无济于事。或者我以前做错了。

4

3 回答 3

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 插件

于 2012-07-29T11:55:02.750 回答
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'];
于 2012-07-29T14:43:28.407 回答
1

这就是一切正常工作的方式：我在索引中拥有的内容：

 $(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，它会显示“word”。如果我尝试将地址栏中的“单词”更改为“其他单词”，它什么也不会显示——我必须重新加载页面才能获得结果，或者只是打开一个新的选项卡/窗口。我不知道为什么以前的代码不起作用。可能是我的错误——我不知道。

于 2012-08-01T10:18:55.773 回答