显示搜索结果

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);
}