Question

转到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>

Answer 1

这是我提出的解决方案。所以原来的问题是我无法弄清楚谷歌如何移动他们的搜索框。我认为它涉及一些ajax。我发现你可以用JS做到这一点。我所做的就是更改包含标题和搜索的top_panel div的类。用css我根据课程改变了样式。这将搜索框很好地移动到我想要的位置，但仍然存在问题。当用户键入第二个字母时，它会将类更改回原始类并移动框。当用户键入时，该框将继续前后移动。为了解决这个问题，我在JS中添加了一个简单的if语句。

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>

Google如何在键入时将搜索框移至顶部？

1 个答案: