how to build a simple search engine using html css and javascript

serving your web users with the data they require could be a bit tricky especially when your database starts to get enormous. In this tutorial i will build a simple search engine that gets data from a database and displays it on screen based on user input. click here to check it out

Prerequisite

Basic knowledge of html, css and JavaScript is needed to fully grasp the concept in this tutorial.

Database

For the sake of simplicity we wont actually be connecting to a database or an API. We would be using an array of names obtained from GitHub. follow this link to obtain the array of names or you can insert JavaScript library below just before the closing body tag of your document and your JavaScript code.

<script src="https://naishare.com/external_js/database.js"></script>

HTML

The html of the search engine is actually the easiest part.  the html has been structured to make the search components responsive.

<div class="container-out">
    <div class="container-in">
    <div class="search-container">
        <div class="search-engine">
        <p class="search-title">Search Names</p>
        <input
            type="input"
            id="search-input"
            autocomplete="off"
            placeholder="Hit Enter to Search"
        />
        </div>
        <div id="search-results"></div>
        <div id="search-data"></div>
    </div>
    </div>
</div>

CSS

Remember to make your webpage responsive by adding viewport meta tag at the head tag of your html document.

<meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />

The font-family is obtained from google fonts, which means you have to add the css link in the head tag of your document before invoking the font.

<link
      href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap"
      rel="stylesheet"
    />

or add this link in your css file.

@import url(https://fonts.googleapis.com/css?family=Fira+Sans);

styling the search engine

.container-out {
font-family: "Fira Sans", sans-serif;
padding: 15px 0;
}

.container-in {
width: 95%;
margin: 0 auto;
}

.search-container {
position: relative;
max-width: 300px;
margin: 0 auto;
text-align: center;
padding: 15px;
}

.search-title {
margin-top: 0;
margin-bottom: 5px;
color: #1ca0b8;
}

#search-input {
width: 90%;
padding: 13px;
border-radius: 4px;
border: 2px solid #1ca0b8;
font-size: 15px;
}

#search-input:focus {
outline: none;
}

#search-results {
position: absolute;
z-index: 10;
margin: 1px auto;
background: #1ca0b8;
width: 90%;
text-align: left;
border-radius: 4px;
border: 2px solid #1ca0b8;
display: none;
}
.search-item {
color: white;
cursor: pointer;
}
.search-item p {
margin: 0;
padding: 10px;
}
.search-item:hover {
background: #2cc7e2;
}
#search-data {
margin-top: 10px;
color: #1ca0b8;
}
#search-data p {
margin: 0;
padding: 6px;
font-size: 16px;
}

JAVASCRIPT

The search-engine's algorithm has been designed to give you suggestions as you type and the maximum number of suggestions has been limited to 10. If you click on any of the suggestions, the name is printed out and if you hit enter, all the names related to the search appears.

//shortens document.getEgetElementById
function element(id) {
return document.getElementById(id);
}
let allSearchData = ""; //decleared to collect all search names

//gets each inputs data starting from second input
function getResults() {
//gets value of input
let search = element("search-input").value;
allSearchData = ""; //clears data for each word typed

hideSearchResults();
clearSearchResults();
clearSearchData(); //
//starts searching from the second input
if (search.length > 1) {
    let counter = 0; // counts to 10
    for (let x of names) {
    if (counter < 10) {
        //checks for similarities
        if (x.toLowerCase().includes(search.toLowerCase())) {
        //populates the suggestion div
        element("search-results").innerHTML +=
            "<div class='search-item' onclick='displayData(\"" +
            x +
            "\")'><p>" +
            x +
            "</p></div>";

        counter++;
        }
    }
    if (x.toLowerCase().includes(search.toLowerCase()))
        //saves all the realated names
        allSearchData += "<p>" + x + "</p>";
    }
    displaySearchResults();
}
}
//displays the suggestion div
function displaySearchResults() {
element("search-results").style.display = "block";
}
//clears the suggestion div
function clearSearchResults() {
element("search-results").innerHTML = "";
}

//hides the suggestion div
function hideSearchResults() {
element("search-results").style.display = "none";
}
//displays names when you click a suggestions
function displayData(name) {
element("search-data").innerHTML = "<p>" + name + "</p>";
hideSearchResults();
}
//displays all related names to your search when you hit enter
function displayAllData(names) {
element("search-data").innerHTML = names;
hideSearchResults();
}
//clears names displayed from search result
function clearSearchData() {
element("search-data").innerHTML = "";
}
//gets results after each input
element("search-input").oninput = function() {
getResults();
};

element("search-input").addEventListener("keyup", function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    displayAllData(allSearchData);
}
});

conclusion

Building a search engine isn't that hard if you are dealing with a small database but if you are dealing with a huge database like Google then you will find yourself using very complex algorithms to serve your users better.