0

Go to google type something and it will relocate the search box to the top, and load a results page without hitting search or enter. The results page is black at first then as typing continues it loads results. I'm assuming this uses ajax, but does it load a new html page or somehow change the home page?

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

这是我想出的解决方案。所以最初的问题是我无法弄清楚谷歌是如何移动他们的搜索框的。我认为它涉及一些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>
于 2013-08-13T16:40:57.197 回答