Spaces:
Running
Running
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); | |
}); | |
} |