How to Make a Customizable Google Custom Search Engine Box

Share Tweet

Google Custom Search Engine is a great service when you have to implement a search functionality to as website and do not spend too much time. However, the default way of implementing it restricting us to have a certain search box design that might not blend well to our website. In this post, I’ll show how I found a workaround solution and actually implement on this very blog.

To see the solution in action, feel free to search anything on the search box at the top of the right sidebar. :) This solution will require some JavaScript knowledge but if you don’t know you’ll understand and be able to implement yourself anyway. No jQuery required, by the way.

Customized Google CSE Box Customized Google CSE Box

Customized Google CSE Results Customized Google CSE Results for “django” search

1. Get Google CSE code and make a results page

I’ll skip how to go and register you website to Google Custom Search Engine. Use the official Custom Search Engine guide here to do it. What you need is;

  • Get the HTML code for placing search results to a page from Google Custom Search Engine service, say it’s example.com/search.html for you.
  • Use below JavaScript code and minimal search box form to search anywhere and get the results on example.com/search.html

2. Place the search box form and required JavaScript to any page you want

Below find a minimal input tag in a form, I’m also putting a button but typing search query and hitting Enter will work fine.

<!-- minimal & customizable Google CSE search box form -->
<form class="search-form">
    <input type="text" name="q">
    <button type="submit">Search</button>
</form>

You can add styles, classes, a placeholder, anything. Below are the minimal requirements:

  • class="search-form" on form so we can refer to it using JavaScript
  • name="q" on input so we can get the search query value using JavaScript
  // JavaScript code that should follow the search box code
  
  // (must part)
  
  // add a listener for form submission, i.e. when user hits Enter or
  // clicks to any submit button form has
  document.querySelector('.search-form').addEventListener('submit', function(e) {
    // do not actually submit the form, we'll do something else :)
    e.preventDefault();
    // read the search query for input tag, i.e. user searches
    // for "django" let's say
    var q = document.querySelector('input[name="q"]').value;
    // just proceed if user has typed something
    if (q.length > 0) {
      // go to search results page which is search.html here
      // but can be anything you like with "gsc.q" hash parameter
      // equal to search query
      window.open('/search.html#gsc.q=' + q, '_self');
    }
  });

  // (optional part)
  // below is only used if you also want to put the search box
  // on the search results page it's useful when the user wants
  // to search something else directly and let user know
  // what she is searching for at that moment
  
  // check if any hash parameter exists on the URL
  if (window.location.hash.length > 0) {
    // read the search query value among hash parameters
    // with key "gsc.q="
    var q = window.location.hash.substring(1).split('&').filter(function(v) {
      return v.substring(0, 6) === 'gsc.q=';
    })[0].substring(6);
    // if there is actually a search query
    if (q.length > 0) {
      // put it as the input tag's value
      document.querySelector('input[name="q"]').value = q;
    }
  }

Note that:

  • /search.html part in window.open() is assumed for this guide. You should change the JavaScript code accordingly. For example it’s /blog/search/ for my website
  • This JavaScript code should be put anywhere the search box form is placed. Also, place the JavaScript code below the form so it is loaded beforehand

That’s it. Now, you have a minimal search box that works and you can customize it in any ways.

Share Tweet

Questions?

Please start a discussion down below or send me an email!