https://i.sstatic.net/1rTiC.png
I have recently created a Vue.JS new tab page and I'm looking to integrate Google suggestions into the search bar. After some research, I stumbled upon an API that seems like it could help me achieve this. However, when I run the code snippet below:
function retrieveQueries() {
fetch(
`http://suggestqueries.google.com/complete/search?client=chrome&q=cats`
)
.then((res) => res.json()) //failed when just printing res as the default output, or with res.text()
.then((data) => {
console.log(data);
})
.catch((err) => {
console.error(err);
});
}
Upon execution, I encounter the following error message in the console:
GoogleSearchBar.vue?69f5:42 TypeError: Failed to fetch
eval @ GoogleSearchBar.vue?69f5:42
Promise.catch (async)
retrieveQueries @ GoogleSearchBar.vue?69f5:40
Object.onInput._cache.<computed>._cache.<computed> @ GoogleSearchBar.vue?69f5:14
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163
invoker @ runtime-dom.esm-bundler.js?830f:301
However, when testing the same URL using an API Tester, I receive the following response:
["cats",["cats","cats for sale","cats for sale in my area","cats for sale UK"],["","","",""],[],{"google:clientdata":{"bpc":false,"tlw":false},"google:suggestrelevance":[1252,650,601,600],"google:suggestsubtypes":[[433,355],[433,457],[402],[402]],"google:suggesttype":["QUERY","QUERY","QUERY","QUERY"],"google:verbatimrelevance":1300}]
This code functions properly with the openweathermap API, and the response from an API tester indicates that I am getting the desired results. Is there something wrong with my implementation, or is there a more effective approach to achieving this functionality?