Pellentesque nec neque ex. Aliquam at quam vitae lacus convallis pulvinar. Mauris vitae ullamcorper lacus. Cras nisi dui, faucibus non dolor quis, volutpat euismod massa. Donec et pulvinar erat.
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.
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.
Pellentesque nec neque ex. Aliquam at quam vitae lacus convallis pulvinar. Mauris vitae ullamcorper lacus. Cras nisi dui, faucibus non dolor quis, volutpat euismod massa. Donec et pulvinar erat.
<!-- when the form is submitted, either with submit button or ENTER key, call search() --><formonsubmit="return search()"><inputtype="text"id="query"></form><!-- show the results in this DIV --><divid="results"></div><script>functionsearch(){constcx='009833334622897458665:rtvizlb'// your search engine id constapikey='AIzaSyAmvBcHwO9VtVny-cVrP7IhXJ'// your api key/* select the input element */letinput=document.getElementById('query')/* fetch the following URL that includes apikey, cx and the value of input */fetch(`https://www.googleapis.com/customsearch/v1?key=${apikey}&cx=${cx}&q=${input.value}`).then(response=>response.text()).then(text=>{letresult=JSON.parse(text)result.items.forEach(item=>{/* add it to your results div */// item.link, item.title, ...etc})})/* make sure the form isn't actually submitted by returning false */returnfalse}</script>
More details about what happens with fetch:
/* this fetches the URL and resolves response */fetch(`https://www.googleapis.com/customsearch/v1?key=${apikey}&cx=${cx}&q=${input.value}`)/* this resolves only the responseText */.then(response=>response.text())/* parse the responseText to Object */JSON.parse(text)
The Object parsed from JSON looks like this:
Each item in result.items looks like this:
I'll let it up to you figuring out how to add an item to your result DIV. (create an <a> element and set its href attribute to item.link)
Pellentesque nec neque ex. Aliquam at quam vitae lacus convallis pulvinar. Mauris vitae ullamcorper lacus. Cras nisi dui, faucibus non dolor quis, volutpat euismod massa. Donec et pulvinar erat.
To use Google Suggest, you need a server. Cross Domain XMLHttpRequests are not allowed. I have actually created an NPM module for Google Suggest that does exactly that. It fetches suggestions from Google Search.
All you need to do is create a server that pipes the response to the client and then use some jQuery auto-complete plugin to render them visually.
Pellentesque nec neque ex. Aliquam at quam vitae lacus convallis pulvinar. Mauris vitae ullamcorper lacus. Cras nisi dui, faucibus non dolor quis, volutpat euismod massa. Donec et pulvinar erat.
Thanks for the follow up Jochem, however I'm more interested in receiving suggestions based on the sites listed in my search engine rather than the entire web. Recently I found this function (google.search.CustomSearchControl.attachAutoCompletion) so I'm going to try implement it in my project, thanks again.
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
Pellentesque nec neque ex. Aliquam at quam vitae lacus convallis pulvinar. Mauris vitae ullamcorper lacus. Cras nisi dui, faucibus non dolor quis, volutpat euismod massa. Donec et pulvinar erat.
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 */vara=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" */varresultsDiv=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 */varresults=document.getElementById('results')results.innerHTML=results.innerHTML+`<p><a href="${item.link}">${item.title}</a></p>`})
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!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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?
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.
More details about what happens with fetch:
The Object parsed from JSON looks like this:
Each item in result.items looks like this:
Awesome, thank you so much Jochem.
I got it:)
Hi Jochem!
Great tut! I was wondering if It's possible to add the autocomplete feature on this form input
To use Google Suggest, you need a server. Cross Domain XMLHttpRequests are not allowed. I have actually created an NPM module for Google Suggest that does exactly that. It fetches suggestions from Google Search.
All you need to do is create a server that pipes the response to the client and then use some jQuery auto-complete plugin to render them visually.
Hi Jochem, thanks for the advise, very useful. I'll look into this.
Did you figure it out? Does it need an article?
Thanks for the follow up Jochem, however I'm more interested in receiving suggestions based on the sites listed in my search engine rather than the entire web. Recently I found this function (google.search.CustomSearchControl.attachAutoCompletion) so I'm going to try implement it in my project, thanks again.
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 thisstackoverflow.com/questions/567779...
But no luck. Help would be appreciated thank you!
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.
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:
If you are using jQuery it is even easier.
If you made it through the tutorial then this should really answer your question.
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!