Can anyone assist me in identifying the issue with my search box? I have created a JavaScript search box that validates input against a predefined keyword list. If a word matches, the "HARMI-SOIL 8.0/15 Result Box" should be displayed, otherwise it should remain hidden (display:none).
The problem I am facing is that after entering a matching word and pressing enter, the Result Box does not appear. Javascript indicates that the words do not match, even though they should. However, when I click on the cross (x) and delete the input, the Result Box shows up and Javascript confirms that the words match. Any tips or hints would be greatly appreciated. Thank you!
var wordsHarmi = [
"Bodenhilfsstoff",
"Dünger","Duenger",
"Harmi",
"Soil",
"Harmi-Soil",
"Boden",
"Mineralien",
"Wurzelwachstum",
"Nährstoffe", "Naehrstoffe",
]
let harmiSuche = document.getElementById('harmi-suche')
const inputSearch = document.getElementById('input-suche');
inputSearch.addEventListener('search', (event) => {
const searchString = event.target.value.toLowerCase();
console.log(event);
// Iterate over words array to find the input value
for (let index = 0; index < wordsHarmi.length; index++) {
console.log("works");
const wordFound = wordsHarmi[index].toLowerCase() ==searchString;
if(wordFound){
console.log("Word found");
harmiSuche.style.display = 'flex';
}
else {
harmiSuche.style.display = 'none';
console.log("Word not found");
}
}
}) #harmi-suche{
display: none;
}
.col-1 {width: 100%;}
.
<!-- CSS styling continues here -->
<div id="sucheingabe" class=" suchergebnis col-1">
<!-- HTML content continuation -->