test-space / script.js
smolSWE's picture
Initial Google clone implementation
6f102b5 verified
raw
history blame
1.92 kB
const searchInput = document.getElementById("search-input");
const suggestionsDiv = document.getElementById("suggestions");
const resultsContainer = document.getElementById("results-container");
const dummySuggestions = [
"what is javascript",
"how to make a website",
"best restaurants near me",
"weather today",
"current news"
];
searchInput.addEventListener("input", function() {
const inputValue = searchInput.value.toLowerCase();
const filteredSuggestions = dummySuggestions.filter(suggestion =>
suggestion.toLowerCase().startsWith(inputValue)
);
displaySuggestions(filteredSuggestions);
});
function displaySuggestions(suggestions) {
suggestionsDiv.innerHTML = "";
if (suggestions.length > 0 && searchInput.value) {
suggestions.forEach(suggestion => {
const suggestionElement = document.createElement("div");
suggestionElement.textContent = suggestion;
suggestionElement.addEventListener("click", function() {
searchInput.value = suggestion;
suggestionsDiv.style.display = "none";
displayResults(suggestion);
});
suggestionsDiv.appendChild(suggestionElement);
});
suggestionsDiv.style.display = "block";
} else {
suggestionsDiv.style.display = "none";
}
}
searchInput.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
const inputValue = searchInput.value;
displayResults(inputValue);
suggestionsDiv.style.display = "none";
}
});
function displayResults(query) {
resultsContainer.innerHTML = "";
const dummyResults = [
`Result 1 for ${query}`,
`Result 2 for ${query}`,
`Result 3 for ${query}`
];
dummyResults.forEach(result => {
const resultElement = document.createElement("div");
resultElement.textContent = result;
resultsContainer.appendChild(resultElement);
});
}