显示搜索结果

Question

我正在尝试学习JavaScript，因此我知道这不是针对网店的最佳解决方案，而是仅用于学习。 我正在做一个搜索功能，你搜索一个类别，如果你有一个匹配，结果会显示。我被困在最后一部分。我该如何编写代码才能显示结果？

这里是我的代码：（不介意的showItem功能，还没有开始对一个尚未）

$(document).ready(function() { 
var gallery = [ 
     { 
      "img" : "img/gallery/gameboy2.png", 
      "title" : "GameBoy Color [yellow]", 
      "about" : "A-ball", 
      "price" : 99, 
      "category" : ["Gameboy", "color", "Console", "game"] 

     }, 
     { 
      "img" : "img/gallery/phone.png", 
      "title" : "Hamburger Phone", 
      "about" : "What is a smartphone?", 
      "price" : 129, 
      "category" : ["phone","hamburger"] 
     }, 
     { 
      "img" : "img/gallery/gameboy.png", 
      "title" : "Nintendo GameBoy", 
      "about" : "Things doesnt get better with time. This is the shit.", 
      "price" : 499, 
      "category" : ["Game","Console", "Gameboy"] 
     }, 
     { 
      "img" : "img/gallery/game2.png", 
      "title" : "SEGA", 
      "about" : "Things doesnt get better with time. This is the shit.", 
      "price" : 699, 
      "category" : ["Game","Console", "SEGA"] 
     }, 
        { 
      "img" : "img/gallery/gameboy2.png", 
      "title" : "GameBoy Color [yellow]", 
      "about" : "A-ball", 
      "price" : 99, 
      "category" : ["Gameboy", "color", "Console", "game"] 

     }, 
     { 
      "img" : "img/gallery/phone.png", 
      "title" : "Hamburger Phone", 
      "about" : "What is a smartphone?", 
      "price" : 129, 
      "category" : ["phone","hamburger"] 
     }, 
     { 
      "img" : "img/gallery/gameboy.png", 
      "title" : "Nintendo GameBoy", 
      "about" : "Things doesnt get better with time. This is the shit.", 
      "price" : 499, 
      "category" : ["Game","Console", "Gameboy"] 
     }, 
     { 
      "img" : "img/gallery/game2.png", 
      "title" : "SEGA", 
      "about" : "Things doesnt get better with time. This is the shit.", 
      "price" : 699, 
      "category" : ["Game","Console", "SEGA"] 
     } 

]; 

var search = document.getElementById("submit_search"); 
search.addEventListener("click", searchItem); 

showItemsList(); 


/* 
    Create a li element and append to already existing ul 
    Show an image of the product, and below the image show product title and price 
*/ 

function showItemsList() { 

var ul = document.getElementById("product_list"); 

for(i =0; i < gallery.length; i++) { 

    // get the current product 
    var currentProduct = gallery[i]; 

    // create element li 
    var li = document.createElement('li');       

    // create product img 
    var productImg = document.createElement('img'); 
    productImg.src = currentProduct.img; 
    productImg.className = "thumbnail"; 
    li.appendChild(productImg); 

    // create caption 
    li.appendChild(document.createTextNode(currentProduct.title + " " + currentProduct.price + "kr"));           
    ul.appendChild(li); 
} 

} 

/* 
    If someone click on a product, show a larger picture with a caption telling about the product 
    If you click the picture again, it minimize back to a thumbnail 

*/ 
function showItem() { 

} 

/* 
    A searchfield where you can choose between already existing categories. 
    Show only those items that been search for 
*/ 
function searchItem() { 
    var ul = document.getElementById("product_list"); 
    var search = document.getElementById("search").value; 
    for(var x = 0; x < gallery.length; x++){ 
     //Get the current product 
     var currentProduct = gallery[x]; 

     //get the current product categories 
     var currentProductCategories = currentProduct.category; 

     //Loop through each category 
     for(var z = 0; z < currentProductCategories.length; z++){ 

     //Check if the category is the one we are looking for 
     if(currentProductCategories[z] == search){ 

     } 
    } 
} 
} 

}); 

Answer 1

让你showItemsList方法接受你的列表作为参数：

function showItemsList(items) { 

var ul = document.getElementById("product_list"); 
ul.innerHTML = ""; 
for(i =0; i < items.length; i++) { 

    // get the current product 
    var currentProduct = items[i]; 

    // create element li 
    var li = document.createElement('li');       

    // create product img 
    var productImg = document.createElement('img'); 
    productImg.src = currentProduct.img; 
    productImg.className = "thumbnail"; 
    li.appendChild(productImg); 

    // create caption 
    li.appendChild(document.createTextNode(currentProduct.title + " " + currentProduct.price + "kr"));           
    ul.appendChild(li); 
} 

} 

现在你searchItem方法可以使用它：

function searchItem() { 
    var matches = []; 
    var ul = document.getElementById("product_list"); 
    var search = document.getElementById("search").value; 
    for(var x = 0; x < gallery.length; x++){ 
     //Get the current product 
     var currentProduct = gallery[x]; 

     //get the current product categories 
     var currentProductCategories = currentProduct.category; 

     //Loop through each category 
     for(var z = 0; z < currentProductCategories.length; z++){ 

     //Check if the category is the one we are looking for 
     if(currentProductCategories[z] == search){ 
      matches.push(currentProduct); 
     } 
     } 
    } 
    showItemsList(matches); 
}