显示搜索结果

Show search hits

本文关键字：搜索结果 显示      更新时间：2023-09-26

我正在努力学习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){
        }
    }
}
}
});

让您的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);
}
相关文章：