Looping through array and display results using JavaScript?

I've got a simple array that I want to loop through and search for whatever a user has typed into a text box. Here is what I have got. Bare in mind I am very new to JavaScript:

function recipeInfo(name, ingredients, url) {
this.name = name;  
this.ingredients = ingredients;
this.url = url;
}    

var vIngredients = new Array();
vIngredients[0] = new recipeInfo("Ackee Pasta", "ackee", "ackpast.html");
vIngredients[1] = new recipeInfo("Ackee and Saltfish", "ackee saltfish", "acksalt.html");
vIngredients[2] = new recipeInfo("Jerk Chicken", "jerk", "jerkchick.html");

// do the lookup
function getData(form) { 
    // make a copy of the text box contents
    var inputText = form.Input.value 
    // loop through all entries of vIngredients array
    for (var i = 0; i < vIngredients.length; i++) {
        var list = $("#search-results");
        // compare results
        if (inputText == vIngredients[i].ingredients) {     

        co开发者_开发问答nsole.log(vIngredients[i].name);

        //add to the list the search result plus list item tags
        list.append (
        $("<li class='arrow'><a href='#' >" + vIngredients[i].name + "</a></li>" )
        );
        }
        else {
        // advise user
        var list = $("#search-results");
        // empty list then tell user nothing is found
        list.empty();
        list.append (
        $("<li>No matches found for '" + inputText + "'</li>")
        );
        }
    }
}
</script>

<form name="search" id="search" action="">
    <ul class="rounded">
        <li><input type="search" name="Input" placeholder="Search..." onkeydown="if (event.keyCode == 13) getData(this.form)"></li>
    </ul>
    <ul class="edgetoedge" id="results">
        <li class="sep">Results</li>
    </ul>
        <ul class="edgetoedge" id="search-results">
    </ul>
</form>

Here are the problems I'm having:

1. My search only looks for exact matches. In my example, the "ingredients" property will have more than 1 word in it, so I want to be able to search for any of those words instead of exactly what is in the array
2. If someone searches, the list just keeps appending to the existing list. How can I erase the contents of the before every search?
3. Lastly, my feedback for the user if no match is found always is shown instead of results, regardless if there are results or not. Commenting that section out makes the search work as normal but alas without the feedback if there is no match.

Thanks!

For #1, you want to see if the text in array slot contains the typed word as a substring. Do it like this:

// compare results
        if (vIngredients[i].ingredients.indexOf(inputText) != -1) {

For #2, list.empty() should do it. You have that in your "else" block for the case when no results were found.

For #3 how do you know that results are actually being found? Does "inputText == vIngredients[i].ingredients" ever evaluate to "true"? Does console.log(vIngredients[i].name); log as you'd expect it to?

If you're new to javascript, you may not know about breakpoint debuggers in various browser developer tools. These are invaluable .