Detailed Blog: Build a Simple Search Engine Using JavaScript and SerpAPI

4 min readOct 17, 2024

Step 1: Understanding the Concept

Our goal is to:

Allow users to enter a search term.
Perform a search query (Google search) using SerpAPI.
Collect the links related to the search term.
Display the search results on the webpage.

Step 2: Setting Up SerpAPI

SerpAPI provides a convenient way to interact with search engines like Google without violating their terms. To use SerpAPI:

Sign up at SerpAPI and get your API key.
SerpAPI will allow you to programmatically access Google’s search results and format them into JSON for easy parsing.

Step 3: Creating the Basic Frontend

Let’s start with a simple HTML structure to allow users to input their search term.

3.1 HTML Code (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Search Engine</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        input[type="text"] {
            width: 80%;
            padding: 10px;
            font-size: 18px;
        }
        button {
            padding: 10px 15px;
            font-size: 18px;
        }
        .results {
            margin-top: 20px;
        }
        .result-item {
            margin-bottom: 10px;
        }
        .result-item a {
            font-weight: bold;
            color: #3366CC;
        }
    </style>
</head>
<body>

    <h1>Search Engine</h1>
    <input type="text" id="search-input" placeholder="Enter name to search..." />
    <button id="search-btn">Search</button>

    <div class="results" id="results"></div>

    <script src="app.js"></script>

</body>
</html>

This basic interface consists of:

A text input field where the user enters the search term.
A button to trigger the search.
A div element that will display the search results.

Step 4: Implementing Search Functionality Using JavaScript

We will now use JavaScript to handle user input, call SerpAPI, and display the results.

4.1 JavaScript Code (app.js)

// SerpAPI key (replace with your actual key)
const apiKey = 'YOUR_SERPAPI_KEY';

// Function to fetch search results from SerpAPI
async function fetchSearchResults(query) {
    const apiUrl = `https://serpapi.com/search.json?q=${query}&engine=google&api_key=${apiKey}`;
    
    try {
        const response = await fetch(apiUrl);
        const data = await response.json();
        return data.organic_results;
    } catch (error) {
        console.error('Error fetching search results:', error);
        return [];
    }
}

// Function to display the search results on the page
function displayResults(results) {
    const resultsDiv = document.getElementById('results');
    resultsDiv.innerHTML = ''; // Clear any previous results

    if (results.length === 0) {
        resultsDiv.innerHTML = '<p>No results found.</p>';
        return;
    }

    results.forEach(result => {
        const resultItem = document.createElement('div');
        resultItem.classList.add('result-item');
        resultItem.innerHTML = `
            <a href="${result.link}" target="_blank">${result.title}</a>
            <p>${result.snippet}</p>
        `;
        resultsDiv.appendChild(resultItem);
    });
}

// Function to handle the search button click event
document.getElementById('search-btn').addEventListener('click', async () => {
    const query = document.getElementById('search-input').value;
    
    if (query.trim() === '') {
        alert('Please enter a search term.');
        return;
    }

    // Fetch the search results
    const results = await fetchSearchResults(query);

    // Display the results on the page
    displayResults(results);
});

Here’s how this code works:

fetchSearchResults: Sends a request to SerpAPI with the search query and retrieves the search results.
displayResults: Dynamically creates HTML elements to display the search results, including the title (as a clickable link) and the snippet (a brief description).
Event Listener: When the user clicks the “Search” button, it triggers the search and displays the results.

Step 5: Deploying the Search Engine

5.1 Steps to Host the Search Engine

To make the search engine accessible to users, you can deploy it using GitHub Pages or any other static site hosting provider.

Create a GitHub repository for your project.
Push the code (index.html and app.js) to the repository.
Enable GitHub Pages from the repository settings.
Share the GitHub Pages URL, which will act as the link to your search engine.

Step 6: Testing the Search Engine

Once deployed, navigate to the website, enter a name (e.g., “John Doe”), and click the “Search” button.
The results will be fetched from SerpAPI and displayed as a list of clickable links.
Users can click any result to visit the page.

Step 7: Understanding the Limitations

While this search engine performs well for demonstration purposes, it has some limitations:

API Restrictions: SerpAPI may have limitations on the number of free searches. You might need to upgrade your API plan based on usage.
Google’s Terms of Service: Directly scraping Google results without an API (like SerpAPI) would violate their terms of service.
Custom Search Features: This example doesn’t include advanced features like pagination, filtering, or ranking results. These would require additional work.

Step 8: Improving Your Search Engine

Here are some ideas for enhancing the functionality:

Add Pagination: Split results into pages if there are too many.
Autocomplete Feature: Use an API to suggest search terms as the user types.
Filter by Date: Allow users to filter results by date or relevance.

Step 9: Conclusion

In this blog, we’ve built a simple search engine using JavaScript and SerpAPI that allows users to search for a name and retrieve Google search results. This demonstrates how you can integrate third-party APIs to create your own web-based search tools.

If you want to dive deeper into this topic, consider adding more advanced features or exploring different search APIs.