Custom Google Search In Webpage

Question

I was wondering how i can make my own custom google search.

Can i do something like this :

<form action="http://www.google.com/search=q?+text input" method="get">
<input type="search">
<input type="submit">
</form>

Answer 1

Try custom search api provided by Google for this. Though it is not pure HTML. The following code demonstrates how to render a search box, together with search results, in a div, using the explicit parsetag and function callback:

<div id="test"></div>

<script>
var myCallback = function() {
  if (document.readyState == 'complete') {
    // Document is ready when CSE element is initialized.
    // Render an element with both search box and search results in div with id 'test'.
    google.search.cse.element.render(
        {
          div: "test",
          tag: 'search'
         });
  } else {
    // Document is not ready yet, when CSE element is initialized.
    google.setOnLoadCallback(function() {
       // Render an element with both search box and search results in div with id 'test'.
        google.search.cse.element.render(
            {
              div: "test",
              tag: 'search'
            });
    }, true);
  }
};

// Insert it before the CSE code snippet so that cse.js can take the script
// parameters, like parsetags, callbacks.
window.__gcse = {
  parsetags: 'explicit',
  callback: myCallback
};

(function() {
  var cx = '123:456'; // Insert your own Custom Search engine ID here
  var gcse = document.createElement('script'); gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
      '//www.google.com/cse/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>

This is the tutorial link.

Answer 2

Google have their own walkthrough, https://www.google.com/cse/

Answer 3

Please refer the following steps to create google custom search

1.First u have Sign up to Google Account

2.go to this url https://www.google.com/cse/create/new

3.Then specify the website URL (where to search )

4.click on Create button

5.in the next page there are 3 buttons available from that Click on "Get Code" Button.

6.after clicking on that, its generate the code. Copy that code and paste in your webpage.