Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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) {     

        console.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!

share|improve this question

1 Answer 1

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 .

share|improve this answer
    
Your solution for #1 works. Thank you! For #2 however, when I put list.empty(); before the list.append(); it only shows one entry, the last one. So from my example, searching for ackee will display both entries in the console, but my html output is only Ackee and Saltfish. Lastly, #3. Console always shows what I want, but when it comes to writing to the html, it doesn't work. –  n00bz0rd2 Mar 11 '11 at 9:10
    
I've managed to sort out #2. I moved my list declaration and my list.empty(); underneath my function (before my loop). Still can't get my else statement to work however. –  n00bz0rd2 Mar 17 '11 at 8:57

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.