DEV Community

Create custom Google search engine for your domain(s) and fetch results as JSON

Jochem Stoel on August 09, 2018

I decided to write this simple 5 minute tutorial before I go to sleep. Create a Custom Google Search Engine for your website domain(s) an...

Read full post

Siya • Jan 3 '19

Hi Jochem

Thanks for this tut i have followed all the steps. I am now stock on implementing the search to my website. Can you please assist.

Jochem Stoel • Jan 3 '19

Hi Siya, you need to make a search form on your webpage. A single input that fetches the JSON from your search engine URL and then populates the body or desired HTML element with the results.

Do you need an example of how to do that?

Jake / Smack • Jan 10 '20 • Edited

Hi Jochem,

thanks a ton for this tutorial. I'm a bit of a newbie and I can't seem to find where I can put the 'a' element with href to item.link that will send it back to the

. I'm sure it's something simple but I can't seem to find it. I googled things like "add json elements in script to div" and looked at this

stackoverflow.com/questions/567779...

But no luck. Help would be appreciated thank you!

Jochem Stoel • Jan 10 '20

Hi Jake, there is something wrong with the formatting of your message. Did you forget a closing character?

You need to iterate the results like I showed already and create an <a> element for each result with its href attribute set to the value of item.link.

result.items.forEach(item => {
   /* create an <a> element */
   var a = document.createElement('a')
   /* set the href attribute to the value of item.link */
   a.setAttribute('href', item.link)
   /* also set a clickable text of course */
   a.innerText = item.title

   /* select the element you want to insert the link into 
      i assume here that is a div with id="results" */
   var resultsDiv = document.getElementById('results')
   /* insert the <a> into the result div */
   resultsDiv.appendChild(a)
})

Voila! And you are done.

You will notice that every link will appear on one line this way, so you want to wrap them in a <p> element or some other element that automatically does a newline. You have two options here.
Option 1 is to create an additional <p> element and inject the <a> into that, the second option is just writing the HTML you want in a single line. A little ugly but works too and nothing wrong with it. For example:

result.items.forEach(item => {
   /* basically this says, replace the innerHTML of this div 
      with what is already there + our new extra HTML */
   var results = document.getElementById('results')
   results.innerHTML = results.innerHTML + `<p><a href="${item.link}">${item.title}</a></p>`
})

If you are using jQuery it is even easier.

result.items.forEach(item => {
   $('#results').append(`<p><a href="${item.link}">${item.title}</a></p>`)
})

If you made it through the tutorial then this should really answer your question.

Jake / Smack • Jan 10 '20 • Edited

Ah yes I see that mistake. Thank you so much for your quick reply, this helps massively! This is exactly what I need. I tried using 'results.innerHTML' but I had passed the string incorrectly it seems. I have this working perfect now, and all of your helpful information has made it easy to understand why it works. Once again thank you so much!

Siya • Jan 3 '19

Thank you, Jockem.
Can you please provide me with the example. I can create the search form, i am not sure what to do with the JS fetch code and how to display the results.

Mihail Malo • Sep 12 '18

Should probably be .catch(console.error.bind(console))

Jochem Stoel • Sep 12 '18

That is stupid.

Mihail Malo • Sep 12 '18

Suit yourself. What you're doing didn't make it into stable chrome until 2017.

Jochem Stoel • Sep 12 '18

Where I live it is 2018.

Mihail Malo • Sep 13 '18

👌🏿 browserl.ist/?q=defaults 👌🏿

Jochem Stoel • Sep 13 '18

Actually since then I thought about this dialogue with you deeply and if that notation was still unsupported so recently then you are absolutely right to point that out.

I was not aware of this, did not consider it either and I am stubborn.

rkun • Dec 10 '19

"There are two options for programmatic access. The option Custom Search JSON API is free and has a limit of 10,000 queries per day".

As of 10-12-2019, This Google's site states "Custom Search JSON API provides 100 search queries per day for free. If you need more, you may sign up for billing in the API Console. Additional requests cost $5 per 1000 queries, up to 10k queries per day.

If you need more than 10k queries per day and your Custom Search Engine searches 10 sites or fewer, you may be interested in the Custom Search Site Restricted JSON API, which does not have a daily query limit."

naga • Mar 28 '20

Can u please guide me a steps how can i implement this in wordpress?

Jochem Stoel • Mar 28 '20

No I can not. Implementing it in Wordpress is the same as what you see here only you have to copy paste into your template or a widget. You can do this yourself.

naga • Mar 28 '20

im confused which template you are referring to i have a JSON api key and the cx id and <async code like this

can u show me the final template that i have to copy paste in searchform.php?

Jochem Stoel • Mar 28 '20

No.