Welcome folks today in this blog post we will be building a google search engine
in javascript using serpstack api
in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html
file and copy paste the following code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Search Engine using Serpstack</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>Google Search Results</h1> <form id="form" autocomplete="off"> <div class="form-group"> <input type="text" id="search" class="form-control" placeholder="search"> </div> <div class="form-group"> <button class="btn btn-success btn-block">Search</button> </div> </form> <div id="result"> </div> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $("#form").submit(function(e){ e.preventDefault() var query = $("#search").val() var API_KEY = 'b2a78783a54a8f2e5106404d843b1c95' let result='' var url = 'http://api.serpstack.com/search?access_key=' + API_KEY + "&type=web&query=" +query console.log(url); $.get(url, function(data){ $("#result").html('') console.log(data) data.organic_results.forEach(res => { result =` <h1>${res.title}</h1><br><a target="_blank" href="${res.url}">${res.url}</a> <p>${res.snippet}</p> ` $("#result").append(result) }); }) }) </script> </html> |
Here you need to replace your own api key
from the serpstack api
dashboard and then we are making the get
request to the api passing the query
to the api to get the search engine results for the query passed.