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

これは、すべてがうまく機能する方法です：私がインデックスに持っているもの：

 $(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」と表示されます。アドレスバーの「単語」を「他の単語」に変更しようとすると、何も表示されません。結果を取得するにはページをリロードするか、新しいタブ/ウィンドウを開く必要があります。以前のコードが機能しなかった理由はわかりません。それが私の間違いかもしれません-私にはわかりません。

于 2012-08-01T10:18:55.773 に答える
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 に答える