Embedding a Google search bar into a html document

Question

I'm creating an offline HTML document to set as my browser homepage for work. I'd like to include a Google search bar at the top of the page that will allow me to search Google directly.

Google seems to make it easy to embed a Google Custom Search Engine into the page which will let me use Google to search the local page, but I need it to redirect to Google and search there.

Their code:

<!-- Use of this code assumes agreement with the Google Custom Search Terms of Service. -->
<!-- The terms of service are available at http://www.google.com//cse/docs/tos.html -->
<form name="cse" id="searchbox_demo" action="https://www.google.com/cse">
  <input type="hidden" name="cref" value="" />
  <input type="hidden" name="ie" value="utf-8" />
  <input type="hidden" name="hl" value="" />
  <input name="q" type="text" size="40" />
  <input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="https%3A%2F%2Fcse.google.com%2Fcse/tools/onthefly?form=searchbox_demo&lang="></script>

Testing this form returns a Google results page with no results that changes the url to: google.com/cse?cref=&ie=utf-8&hl=&q=test&sa=Search#gsc.tab=0&gsc.q=test&gsc.page=1

Surprisingly, I couldn't find any answers on SO or various search engines. I tried to create a form, use GET, and redirect to https://www.google.com/search? and https://www.google.com/search?q= with no luck. It keeps changing the url search parameter following the ?

I know I'm overlooking something simple but can't find the answer anywhere. Simply put, is Google preventing any search queries from offline documents in an effort to fight scripts/robots?

Answer 1

There is a good explanation of how to use Google Search for your own site or the entire web here.

1. Make sure that your <form> action is

   <form method="get" action="http://www.google.com/search">

2. Set the variable sitesearch to null. (In the link example it is a radio button. Here you can just make it a hidden input.)

   <input type="hidden" name="sitesearch" value="" />

3. Submit the form. (When you say "offline HTML document" realize that to redirect to the Google search results page you will need an internet connection.

Answer 2

I do a similar thing for my projects. I create simple pages with all the links and data that I need regularly. Easy links to hand when I open the browser.

This worked for me:

<script>
  function SearchQuery(val) {
    document.getElementById("searchButton").href = "https://www.google.com/search?q=" + val;
  }

  function buttonClick(){
    document.getElementById("searchBox").value = "";
  }
</script>

<section>
  <input id="searchBox" type="text" name="searchBox" value="" onchange="SearchQuery(this.value)">
  <a id="searchButton" href="https://www.google.co.uk/" target="_blank" onclick="buttonClick()">Search with Google</p>
<section>