This post is a follow up on the first article describing the basics on using the Google Search API. For this article we'll continue with the same code from the previous article and explore some of the most interesting optional features. Please read the first article if you hadn't done that already.

There are three optional query parameters that really stand out:

  • siteSearch This one specifies that all search results should be pages from a given site. In most cases this one is necessary since results from third parties are undesirable.

    https://www.googleapis.com/customsearch/v1?q=&cs=&key=&siteSearch=fungybytes.com
  • fileType Restricts results to files of a specified extension. For example you could only allow for the results to show .PDF files. Specifing multiple file formats is allowed.

    https://www.googleapis.com/customsearch/v1?q=&cs=&key=&fileType=pdf

Some other parameters worth mentioning are:

  • dateRestrict Restricts results to URLs based on date.
  • gl Geolocation of end user.
  • searchType Specifies the search type: image. Please note that if it's unspecified, results are limited to webpages.

Another thing to notice is the extra metadata given with every request, placed under key searchInformation. It's possible to extract the total time for the request to complete (searchTime) or to display the total number of results (totalResults).

Another thing is spelling. This key contains two child nodes:

spelling.correctedQuery which gives a corrected query

spelling.htmlCorrectedQuery which by it's name is formatted in HTML.

The HTML remains pretty much the same in this case. See the first article.

The vanilla JS file has expanded a little including the siteSearch, fileType and start query parameters. It's up to you to decide the contents of these variables.

const http   = new XMLHttpRequest();
const url    = 'https://www.googleapis.com/customsearch/v1'; 
const key    = '';
const cx     = '';
const domain = 'fungybytes.com'
const index = 0; function executeSearch() { var query = document.getElementById('q'); http.open("GET", url + "?key=" + key + "&cx=" + cx + "&q=" + query + "&sitesearch=" + domain + "&start=" + index); http.send(); http.onreadystatechange = (e) => { document.getElementById('result').innerHTML = http.responseText } } (function() { const searchBtn = document.getElementById("search_btn"); searchBtn.addEventListener("click", executeSearch, false); })();

 

To retrieve an API key you'll need to sign in at Google API dashboard. As for a CX key you'll need to create a basic search engine

To see the full example please download the example file.

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 1

How to build a language variants switch in Umbraco 8

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.