Breaking News: Grepper is joining You.com. Read the official announcement!

javascript part of a search engine

Ousman Ndaw answered on May 2, 2023 Popularity 1/10 Helpfulness 1/10

answer javascript part of a search engine

javascript part of a search engine

Comment

//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);
}
});

Popularity 1/10 Helpfulness 1/10 Language css

Source: www.naishare.com

Tags: css javascript search-engine

Link to this answer
Share Copy Link

Contributed on May 02 2023

Ousman Ndaw

0 Answers Avg Quality 2/10

javascript part of a search engine

Contents

More Related Answers

javascript part of a search engine

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.