Цикл по массиву и отображение результатов с помощью JavaScript?

Question

У меня есть простой массив, который я хочу перебрать и найти все, что пользователь ввел в текстовое поле. Вот что у меня есть. Не бери в голову, я очень новичок в 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>

Вот мои проблемы:

1. Мой поиск ищет только точные совпадения. В моем примере в свойстве "ингредиенты" будет более 1 слова, поэтому я хочу иметь возможность искать любое из этих слов вместо того, что находится в массиве
2. Если кто-то ищет, список просто продолжает добавляться к существующему списку. Как я могу стереть содержимое перед каждым поиском?
3. Наконец, мой отзыв для пользователя, если совпадение не найдено, всегда отображается вместо результатов, независимо от того, есть результаты или нет. Комментирование этого раздела делает поиск нормальным, но, увы, без обратной связи, если совпадений нет.

Спасибо!

Answer 1

Для # 1 вы хотите увидеть, содержит ли текст в слоте массива набранное слово в качестве подстроки.Сделайте это так:

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

Для # 2, list.empty () должен это сделать.У вас есть это в вашем блоке "else" для случая, когда результаты не были найдены.

Для # 3, как вы узнаете, что результаты на самом деле были найдены?"InputText == vIngredients [i] .ingredients" когда-либо оценивается как "true"?Do console.log (vIngredients [i] .name);войти в систему так, как вы ожидаете?

Если вы новичок в javascript, вы можете не знать об отладчиках точек останова в различных инструментах для разработчиков браузеров.Это бесценно.