In this blog, we are building a google search engine using Serpstack API with the help of Javascript and HTML. First of all, let’s discuss all requirements that we need to complete this application.

  1. Create an account in https://serpstack.com/. This platform will provide you an accurate and real-time search results API. After registering, you are getting into the serpstack dashboard, and here we can see the access key.

2. Open Visual Studio Code Editor or any code editor that you like for writing the code.

So let’s get start our coding!

First of all, create an index.html file. Here, we are creating a form for inputting our search text. We can import necessary bootstrap cdns for neatly visualizing the form. The bootstrap cdn is available from their official website https://www.bootstrapcdn.com/. Please copy the code from their page and paste it in the head section. Include the custom javascript file under the closing tag of <body>.

The html code for index.html file is given below:

<!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 src="index.js"></script>
</html>

The output for index.html is as shown:

Next part is to write code for index.js file.

$("#form").submit(function(e){
    e.preventDefault()
    var query = $("#search").val()
    var API_KEY = ‘YOUR_ACCESS_KEY’
    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)
        });
    })
})
  • First of all, get the reference of form ‘$(“#form”)’. When the form submits, this will have a callback function that executes e.preventDefault(). So this will prevent the auto submission of the form.
  • We can get the value that we are inputting in the search field using the .val() method into the variable ‘query.’
  • Copy the endpoint that we will be using. This is available on the documentation page of serpstack https://serpstack.com/documentation. You can copy it from there and paste it into our file.
http://api.serpstack.com/search? access_key = YOUR_ACCESS_KEY
  • Also, provide the API key that we got from the Serpstack dashboard.
  • After putting the URL, we have to pass this URL. This will contain a callback function holding the data for us. Now we can console log the data. So if we are inspecting the element, enter a search phrase in the input field, it will return a JSON response in the console.
  • Inside the organic_results, we have the contents that need to be displayed on the page.
  • We are populating the results inside the result div in the index.html file.
  • This is the code for returning the response in HTML format.
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)
        });
  • The output for the search results are shown below:
  • If we are clicking on one of the links, this will appear on the new page in the new tab.

Here, we have built a search engine similar to google search engine using Serpstack API in html and Javascript.


Happy coding!