Since Google announced the departure of Site Search as of 1 April 2018, many developers have been searching for alternatives. One of which was to simply use the new Google CSE (Custom Search Engine). Unfortunatly this substitute included related advertisements as part of the search result. For many clients this behaviour is undesirable as it may show results from direct competitors.

The alternative described here still rests on Google's well known and proven search algorithm. It's driven by the Custom Search JSON API, This REST API let's you develop websites and applications to retrieve and display search results from Google Custom Search programmatically.

There are a few downsides to this solution however:

  • The API provides a maximum of only 100 search queries per day for free. More requests are available for a fee.
  • Some programming skill are required to set things up.
  • It takes some time configuring the search engine itself.

On the other hand the benefits are:

  • You're free to decide in the layout of the search results.
  • You get results which are based on the proven Google algorithm.
  • There's a lot of flexibity and optional features in the REST API itself.

We'll start with some simple HTML just to show a search input field and a placeholder for our set of results.

<input type="text" id="q"/>
<button name="search" id="search_btn">search</button>
<div id="result"></div>

What follows is simple vanilla JS that sends out a http GET request which, with a correct API and CX key, will return a JSON response. Of course it's possible to use any other framework you like to perform this request. You could for intsance perform the same request on the back-end side of your application.

To retrieve an API key you'll need to sign in at Google's API dashboard

As for a CX key you'll need to create a basic search engine

const http = new XMLHttpRequest();
const url  = 'https://www.googleapis.com/customsearch/v1'; 
const key  = ''; //your API key
const cx   = ''; //your engine key
	
function executeSearch()  {
    var query = document.getElementById('q');
	
    http.open("GET", url + "?key=" + key + "&cx=" + cx + "&q=" + query);
    http.send();

    http.onreadystatechange = (e) => {
	document.getElementById('result').innerHTML = http.responseText
    }
}

(function() {
	const searchBtn = document.getElementById("search_btn");
	searchBtn.addEventListener("click", executeSearch, false);
})();

If you're looking for a small example please download the example file. It contains the HTML with inline stylesheet and javascript. The only requirement is to add your own API and CX key.

If you have any questions or remarks please feel free to contact FungyBytes via contact@fungybytes.com or give us a tweet @fungybytes

An alternative to Google Site Search 2

For proper functioning and anonymous analysis of our website, we place functional and analytical cookies that have no or minor consequences for your privacy. These cookies may collect data outside of our website. By using this website you agree to the placement of these cookies.