Implementing Google Custom Search Bar in your Site

Aug 24, 2017 · 2 mins read

Look at the top-right side of the page below, you’ll see a Google custom search bar. If you want to implement a search bar like this on your site, you’ve come to the right place!

There are two ways you can implement the google custom search bar:

Simple implementation
Custom implementation

Simple implementation

First go to cse.google.com/cse/ and click on New search engine.

Fill up:

sites to search (the URL of your site)
name of the search engine (name it whatever you like) and click on Create.

When successfully created, search for the Get code button and click on it. You’ll get something like this.

<script async src="https://cse.google.com/cse.js?cx=YOUR-CODE"></script>
<div class="gcse-search"></div>

Paste the generated code on where you want the search bar. Congratulations! You’ve implemented a basic search engine! Reload your page and give it a test drive. You’ll see something like this.

The search bar.

Google Search Bar

The search results.

Google Search Results

Custom implementation

The above implementation is bland and may not go well along with your site’s UI. To make a customizable search bar follow the instruction below.

Keep the JS code generated by Google (the one shown in the previous section) but replace this-

<div class="gcse-search"></div>

with this.

<gcse:searchresults-only></gcse:searchresults-only>

This tag will be responsible for displaying the search results.

Now, for the search bar design your own search bar or paste the following code (designed with bootstrap).

<form class="navbar-form navbar-right" id="cse-search-box-form-id" onsubmit="return executeQuery();" role="search">
  <div class="input-group"> 
    <input type="text" class="form-control" id="cse-search-input-box-id" size="25" autocomplete="off">
    
    // This script will show a nice text in the placeholder
    <script async type="text/javascript"
      src="//cse.google.com/cse/brand?form=cse-search-box-form-id&inputbox=cse-search-input-box-id">
    </script>
    
    <span class="input-group-btn">
      <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-search"></span>
      </button>
    </span>
  </div>
</form>

You may add custom CSS classes to your search bar to modify it. However make sure the following IDs are present in the form:

Give the form id=“cse-search-box-form-id” and onsubmit=“return executeQuery();”
Give the input field id=“cse-search-input-box-id”

Finally, define the executeQuery() function inside a script tag like this-

<script>
  function executeQuery() {
    var input = document.getElementById('cse-search-input-box-id');
    var element = google.search.cse.element.getElement('searchresults-only0');
    if (input.value == '') {
      element.clearAllResults();
    } else {
      element.execute(input.value);
    }
    return false;
  }
</script>

Now give it a test drive and you should have your very own google custom search bar up and running. Enjoy!