Q: Why are no results detected in my searchbox? can someone help me to detect the issue of my searchbox. I made a searchbox in javascript that proofs the input with a defined keyword list. If a word is matching, then the "HARMI-SOIL 8.0/15 Result Box" should show up, if it does not match the Result Box should stay hidden (display:none).
My Issue is that after typing in a matching word and klicking enter, the Result Box does not show up. Javascript tells me the word are not matching, even though they should. Just when I click on the cross (x) and deleting the input the Result Box shows up and Javascript tells me the words are matching. I am grateful about any hint. Thank you very much!


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%;}
    .device-margin-left{
        margin-left: 5.625%;
    }
    .device-margin-right{
        margin-right: 5.625%;
    }
    .column{
        display: flex;
        flex-direction: column;
    }


    .sans-serif-caption{
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 0.75em;
        line-height: 1.375em;
        font-weight: normal;
        color:#444342;
        text-decoration: none;
    }
    .search{
        display: flex;
        flex-direction: row;
        width: 40%;
        height: auto;
        border: 1px solid #444342;
        opacity: 1;
        align-items: center;
        padding:1%;
    }
    .mobile-search{
        display: flex;
        flex-direction: row;
        height: auto;
        border: 1px solid #444342;
        opacity: 1;
        /*align-items: center;*/
        align-content:space-between ;
        padding:1%;
       /* margin-left:7%;*/
        margin-right: 7%;
    }
    .mobile-search input{
        border: none;
        background-color: #F5EAAB;
        width: 100%;
        text-transform: uppercase;
    }
    .page-search{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: auto;
        border: 1px solid #444342;
        opacity: 1;
        align-items: center;
        padding:1%;
    }
    .page-search input{
        width: 100%;
        border: none;
    }
    .page-search input:focus{
        border: none;
    }
    .suchergebnis{
        display: flex;
        flex-direction: row;
        margin-top: 10%;
        margin-bottom: 10%;
        /*justify-content: center;*/
    }


    .kachel3{
        display: flex;
        flex-direction: row;
        align-items: left;
        padding:1%;
        border: 4px solid #BF9D1D ;
        border-radius: 3%;
        margin-top: 3%;
        /*margin-left: 1%;*/
        background-color: #FFFEF9;
        box-shadow: 0px 3px 10px #00000026;
        height: auto; 
    }
    .standardbutton-anordnung{
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }
    .standardbutton{
        width:auto;
        height: auto;
        border: 1px solid #444342;
        align-items: center;
        background-color: #FFFEF9;
        text-transform: uppercase;
        padding: 1%;
    }
    .standardbutton:hover{
        color: #BF9D1D;
        border: 1px solid #BF9D1D;
    }
    .standardbutton:focus{
        color: #BF9D1D;
        border: 1px solid #BF9D1D;
    }
<div id="sucheingabe" class=" suchergebnis col-1">
    <li class="col-3"></li>
    
        <div class="page-search sans-serif-text-mobil">
            <input type="search" placeholder="Was suchst du?" id="input-suche">
            <image src="media/search-24px.svg" alt="search-icon" />
        </div>
    
    <li class="col-3"></li>
</div>

<div id="suchfilter" class="column">


        <div id="harmi-suche" class="item kachel3 device-margin-right device-margin-left">
            <div class="column" style="width: 100%;">
                <h3 class="serif-heading-3">HARMI-SOIL 8.0/15</h3>
                <p class="sans-serif-caption">HARMI-Soil 8.0/15 ist ein mineralischer Bodenhilfsstoff auf Basis von Gesteinsmehl und natürlichen Zusätzen, die zu 90% aus Produktionsresten bestehen und  deshalb nicht extra hergestellt werden müssen.</p>
                <div class="standardbutton-anordnung col-1" style="justify-content: flex-end; margin-top: 2%;">
                    <button class="standardbutton sans-serif-caption"><a href="./harmi-soil.html">Mehr erfahren</a></button>
                </div>
            </div>
        </div>
</div>



A: You need to change condition
if(wordFound == true){
        console.log("Word found");
        harmiSuche.style.display = 'flex';
    }


A: Once a match is found, you need to stop the iteration (otherwise it will only work for the last item in the list :) )
       if(wordFound){
            console.log("Word found");
            harmiSuche.style.display = 'flex';
            break; // <--- this is the key line!
        } else {
         ......
       }
}


A: Fixed your code, have a look.
A line of missing HTML and some Javascript. I have not touched the CSS.

*

*First of all, you need to transform your original array elements into lowercase, just like you did with the inputSearch variable.

*Your for loop is in the wrong place and unnecessary. For example, your array wordsHarmi has 11 elements, hence the loop will run 11 times. It is memory intensive and also complicated. I recommend using Javascript's include function.

*The html file was missing an input field which was causing the error.

<!-- I put the search input box in the following position in index.html file-->
    <input id="input-suche" type="search"/>
    <div id="suchfilter" class="column">
        <div id="harmi-suche" class="item kachel3 device-margin-right device-margin-left">



*Your JavaScript file had to be rewritten. Here's the solution. I've tested it and it works.

//I have changed your variable delaration to 'const' instead of 'vars', but you can still use var if you want to.
const wordsHarmi = [
    "Bodenhilfsstoff",
    "Dünger","Duenger",
    "Harmi",
    "Soil",
    "Harmi-Soil",
    "Boden",
    "Mineralien",
    "Wurzelwachstum",
    "Nährstoffe", 
    "Naehrstoffe",
];

const harmiSuche = document.getElementById('harmi-suche')
const inputSearch = document.getElementById('input-suche');

/*Before running the actual code, you have to transform your array elements into lowercase, 
just like you transformed the searchinput into lowercase*/

//This is a modern Javascript map function,
//we stored the new array from your original array with all elements in lowercase
let wordsHarmi_lower = wordsHarmi.map(function(v){
    return v.toLowerCase();
})
//uncomment to see what it does if you are curious. 
// console.log(wordsHarmi_lower);


inputSearch.addEventListener('search', (event) => {
    const searchString = event.target.value.toLowerCase(); //saves lowercase of the search string

    // Javascript's includes function returns true or false by iterating into array.
    //For loop isn't the best solution for this code
    const found = wordsHarmi_lower.includes(searchString);

    // any word you enter will now be changed into lowercase, and compared to the wordsHarmi_lower array,
    // return true or false based on whether the element is found. You can uncomment the code below to see that.
    // console.log(found);
    

    //Therefore, the logic
    if(found === true){
        harmiSuche.innerHTML = "Hurray we found your user"; 

    } else {
        //you can insert a whole div and anything else you like here
        harmiSuche.innerHTML = "Sorry not found";
    }
})

