title: Auto Google Search Results On My Website
body: <p>I'm making a <a href="http://gigster.webege.com" rel="nofollow">website</a>. When you click on my search box and type you click search and then it takes you to google.com with search results how would i use ajax to display results in a frame as you type?.when u search on <a href="http://google.com" rel="nofollow">http://google.com</a> the text you type brings up results by its self without pressing search how can i do this? Here is my html snippet </p>
  
  <pre><code>&lt;div class='search'&gt;
  &lt;form method="get" id='search' action="http://www.google.com/search"&gt;
  &lt;input type="hidden" name="q" size="31" maxlength="255" value="Site Name:" /&gt;
  &lt;input type="text" name="q" size="31" maxlength="255" style="height: 24px;" placeholder="Search..." /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have alot of css behind it to make the text box enlarge and change color. Here is the snippet just in case it's relevant.</p>
  
  <pre><code>#search input[type="text"] {
  background: url(imgs/search-white.png) no-repeat 10px 6px #444;
  border: 0 none;
  font: bold 12px Arial,Helvetica,Sans-serif;
  color: #d7d7d7;
  width:150px;
  padding: 6px 15px 6px 35px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2)   inset;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
  -webkit-transition: all 0.7s ease 0s;
  -moz-transition: all 0.7s ease 0s;
  -o-transition: all 0.7s ease 0s;
  transition: all 0.7s ease 0s;
  outline: none;
  }
  
  #search input[type="text"]:focus {
  background: url(imgs/search-dark.png) no-repeat 10px 6px #fcfcfc;
  color: #6a6f75;
  width: 175px;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  outline: none;
  }
  div.search
  {
  position:fixed;
  top:8px;
  right:5px;
  }
  </code></pre>
  
  <p>so how would i make an ajax frame that displays google search results as you type?
  i know nothing about ajax i dont know how to start a line of code with it ither so please explain in depth</p>
  
  <p>*side note 
  sorry if website looks bad im 13 </p>