0

Googleに何か入力すると、検索ボックスが一番上に移動し、検索や入力を押さなくても結果ページが読み込まれます。結果ページは最初は黒で、入力を続けると結果が読み込まれます。これはajaxを使用していると思いますが、新しいhtmlページをロードしたり、何らかの形でホームページを変更したりしますか?

HTML:

   <div id="top_panel" class="main fluid">
        <nav id="topNav" class="fluid">
            <ul class="fluid fluidList navSystem">
                <li class="fluid navItem web"><a href="index.html" class="web">Web</a></li>
                <li class="fluid navItem photos"><a href="#">Photos</a></li>
            </ul> <!-- END .navSystem -->
        </nav> <!-- END #topNav -->
    </div> <!-- END #top_panel -->

AJAX:

<script>
function keypress() {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("top_panel").removeClass("main").addClass("results");
        }
    }
    xmlhttp.send();

}
</script>
4

1 に答える 1

0

これが私が思いついた解決策です。つまり、最初の問題は、Google が検索ボックスをどのように移動したかを理解できなかったことです。ajaxが関係していると思いました。JSだけでできることがわかりました。ヘッダーと検索を含む top_panel div のクラスを変更しただけです。css を使用して、クラスに応じてスタイルを変更しました。これにより、検索ボックスが目的の場所にうまく移動しましたが、まだ問題がありました. ユーザーが 2 番目の文字を入力すると、クラスが元に戻り、ボックスが移動します。ユーザーが入力すると、ボックスは前後に移動し続けます。これを修正するために、単純な if ステートメントを JS に追加しました。

HTML:

   <div id="top_panel" class="main fluid">
        <nav id="topNav" class="fluid">
            <ul class="fluid fluidList navSystem">.......</ul> <!-- END .navSystem -->
        </nav> <!-- END #topNav -->

        <header id="header" class="fluid">
            <div id="innerHead" class="fluid">
                <div id="logo" class="">
                <img src="imgs/logo.png" alt="Chitt Chat"/>
              </div> <!-- END #logo -->
                <div id="search" class="">
                <form class="form-wrapper cf">
                    <input type="search" placeholder="Search here..." id="field" required>
                    <button type="submit">Search</button>
                </form>
                </div> <!-- END #search -->
            </div> <!-- END #innerHead -->
         </header><!-- END #header -->
    </div> <!-- END #top_panel -->

JS:

    <script>
$('#field').on('keypress', function () {
    if ($('#top_panel').hasClass('main')) {
        $('#top_panel').toggleClass('main results');
    }
});
</script>
于 2013-08-13T16:40:57.197 に答える