4

我尝试在 jQuery 中动态生成一个列表视图。这适用于整个列表，但现在我需要过滤/搜索/减少我的初始数据：

var rezepte = [
{ "name" : "Eierkopf" , "zutaten" : ["Eier", "Zucker"] , "zubereitung" : "alles schön mischen." },
{ "name" : "Käseschnitte" , "zutaten" : ["Käse", "Brot", "Paprika"] , "zubereitung" : "Käse drauf und in den Ofen" },
{ "nme" : "Gemüse-Auflauf" , "zutaten" : ["Lauch"] , "zubereitung" : "1. schneiden 2. Kochen 3. essen" }
];

我想通过搜索数组过滤/搜索“食谱”，例如var searcharray = ["Zucker", "Paprika"]：

var result = [
{ "name" : "Eierkopf" , "zutaten" : ["Eier", "Zucker"] , "zubereitung" : "alles schön mischen." },
{ "name" : "Käseschnitte" , "Zutaten" : ["Käse", "Brot", "Paprika"] , "zubereitung" : "Käse drauf und in den Ofen" }];

我在 for 循环中尝试了很多东西：过滤、映射、推送——但所有这些都没有成功，总是会导致未定义的对象。

我也不确定我的食谱数组应该是什么语法：必须有可变数量的“成分”的可能性。

任何帮助和提示将不胜感激。

非常感谢，安迪

4

2 回答 2

3

使用本机 Array 函数，这应该可以工作：

result = recipes.filter(function(recipe) {
    return search.any(function(ingredient) {
        return recipe.ingredients.indexOf(ingredient) != -1;
    });
});

使用 jQuery，它将是

result = $.grep(recipes, function(recipe) {
    for (var i=0; i<search.length; i++)
        if ($.inArray(recipe.ingredients, search[i]) != -1)
            return true;
    return false;
});
于 2012-11-16T10:09:17.240 回答
1 
var rezepte = [
{ "name" : "Eierkopf" , "zutaten" : ["Eier", "Zucker"] , "zubereitung" : "alles schön mischen." },
{ "name" : "Käseschnitte" , "zutaten" : ["Käse", "Brot", "Paprika"] , "zubereitung" : "Käse drauf und in den Ofen" },
{ "nme" : "Gemüse-Auflauf" , "zutaten" : ["Lauch"] , "zubereitung" : "1. schneiden 2. Kochen 3. essen" }
];

function search() {
    var search = $("#searchfield").val(); // returns string
    var searcharray = search.split(',');
    if (searcharray == "") {
        check = $.isArray(searcharray);
        alert(check); // true
        return rezepte;
    } else { 
        var result = [];
        alert("till here fine");
        result = $.grep(rezepte, function(rezept) {
            for (var i=0; i<searcharray.length; i++) {
                if ($.inArray(searcharray[i], rezept.zutaten) != -1)
                    return true;
            } 
             return false;
        });
    }
    console.log(result);
    return result;  
}
$(function(){
     $("#search").click(search);
})

我让它与这段代码一起工作。参见演示： http: //jsfiddle.net/VcZtE/1/（结果可以在浏览器控制台中看到）。与您的代码的唯一区别在于： if ($.inArray(searcharray[i], rezept.zutaten) != -1). 根据文档，inArrayneedle 应该是要搜索的第一个参数和数组 - 第二个。你有相反的方式：数组作为第一个参数传递，针（要搜索的值）作为第二个参数传递。

于 2012-11-16T16:35:44.127 回答