ajax - How does google move the search box to the top while typing? -

go google type , relocate search box top, , load results page without hitting search or enter. results page black @ first typing continues loads results. i'm assuming uses ajax, load new html page or somehow change 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 ie7+, firefox, chrome, opera, safari         xmlhttp=new xmlhttprequest();     } else {// code 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> 

here solution came with. original problem couldn't figure out how google moved search box. thought had ajax involved. figured out can js. did change class of top_panel div contains header , search. css changed styles depending on class. moved search box nicely wanted it, there still problem. when user typed second letter change class original , move box. box keep going , forth user typed. fix added simple if statement 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>