使用JavaScript循環訪問數組並顯示結果？

我有一個簡單的數組，我想循環並搜索用戶輸入到文本框中的任何內容。這是我得到的。裸記住我是很新的JavaScript的：使用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個單詞，所以我希望能夠搜索任何這些單詞而不是確切地在數組中是什麼
如果有人搜索，列表只是保持附加到現有列表。如何在每次搜索前清除內容？
最後，如果找不到匹配，我會反饋給用戶，而不是結果，無論是否有結果。如果沒有匹配，則評論該部分會使搜索正常進行，但如果沒有反饋則不會提供反饋。

謝謝！

來源

2011-03-10 n00bz0rd2

對於＃1，您希望查看數組插槽中的文本是否包含鍵入的單詞作爲子串。這樣做：

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

對於＃2，list.empty（）應該這樣做。在沒有找到結果的情況下，您可以在「其他」塊中找到它。

對於＃3你怎麼知道結果實際上被發現？「inputText == vIngredients [i] .ingredients」是否評估爲「真」？請問console.log（vIngredients [i] .name）;日誌如你所期望的那樣？

如果您是JavaScript新手，您可能不知道各種瀏覽器開發人員工具中的斷點調試器。這些是非常寶貴的。

來源

2011-03-10 17:39:42 morgancodes

您爲＃1工作的解決方案。謝謝！對於＃2，但是，當我把list.empty（）;在list.append（）之前;它只顯示一個條目，最後一個條目。所以從我的例子來看，搜索ackee將在控制檯中顯示這兩個條目，但是我的html輸出只有Ackee和Saltfish。最後，＃3。控制檯總是顯示我想要的內容，但是當寫入到html時，它不起作用。 – n00bz0rd2 2011-03-11 09:10:44

我設法弄清了＃2。我移動了我的列表聲明和我的list.empty（）;在我的函數下面（在我的循環之前）。但仍然無法讓我的其他聲明工作。 – n00bz0rd2 2011-03-17 08:57:47

使用JavaScript循環訪問數組並顯示結果？

回答

相關問題