Javascript 如何使用搜索筛选器表单搜索JSON数组？

我有一个JSON数组和一个带有多个过滤器的搜索表单。在这个搜索表单中，我有4个用于筛选的选择下拉字段。如何根据用户选择的内容搜索JSON数组，然后在点击提交按钮后显示结果

例如，如果用户在“食品选择下拉列表”字段中选择“汉堡”，在“饮料选择下拉列表”字段中选择“可乐”。我希望能够展示所有提供这两种产品的餐厅。这可能吗

var restaurants = [
            {"restaurant" : { "name" : "McDonald's", "food" : "burger", "drink" : "coke", "content" : "Lorem ipsum dolor sit amet" }},
            {"restaurant" : { "name" : "KFC", "food" : "chicken", "drink" : "pepsi", "content" : "Lorem ipsum dolor sit amet" }},
            {"restaurant" : { "name" : "Pizza Hut",  "food" : "pizza", "drink" : "sprite", "content" : "Lorem ipsum dolor sit amet" }},
            {"restaurant" : { "name" : "Dominos",  "food" : "pizza", "drink" : "root beer", "content" : "Lorem ipsum dolor sit amet" }},
            {"restaurant" : { "name" : "Popeyes",  "food" : "chicken", "drink" : "mist", "content" : "Lorem ipsum dolor sit amet" }}
          ];

JavaScript有一个接受函数的本机。例如，您只需要在用户选择输入时生成此函数

function filter(a, food, drink) {
    food = food ? food.toLowerCase() : 0;
    drink = drink ? drink.toLowerCase() : 0;
    return a.filter(function (e) {
        if (food && e.restaurant.food.toLowerCase().indexOf(food) === -1)
            return false;
        if (drink && e.restaurant.drink.toLowerCase().indexOf(drink) === -1)
            return false;
        return true;
    });
}

filter(restaurants, 'burger', 'coke');
// [{"restaurant":{"name":"McDonald's","food":"burger","drink":"coke","content":"Lorem ipsum dolor sit amet"}}]

过滤阵列的一种方法如下 复杂的通用过滤器

函数自定义过滤器（值）{
返回函数（el）{
var r=el.restaurant；
var keys=Object.keys（值）；
var-answer=true；
for（变量i=0，len=keys.length；i

我对Igor的答案投了赞成票，但是，因为我想在JSFIDLE中给出一个完整的示例，下面是：

我添加了一个“Any”选项的可能性，因此在特定元素上没有过滤器

以下是总结：

HTML:

食物：
任何
汉堡
鸡
披萨
饮料：
任何
焦炭
百事可乐
(传说中的)精灵
根啤酒
薄雾

JavaScript:

var restaurants = [
    {
        "restaurant": {
            "name": "McDonald's",
            "food": "burger",
            "drink": "coke",
            "content": "Lorem ipsum dolor sit amet"
        }
    },
    {
        "restaurant": {
            "name": "KFC",
            "food": "chicken",
            "drink": "pepsi",
            "content": "Lorem ipsum dolor sit amet"
        }
    },
    {
        "restaurant": {
            "name": "Pizza Hut",
            "food": "pizza",
            "drink": "sprite",
            "content": "Lorem ipsum dolor sit amet"
        }
    },
    {
        "restaurant": {
            "name": "Dominos",
            "food": "pizza",
            "drink": "root beer",
            "content": "Lorem ipsum dolor sit amet"
        }
    },
    {
        "restaurant": {
            "name": "Popeyes",
            "food": "chicken",
            "drink": "mist",
            "content": "Lorem ipsum dolor sit amet"
        }
    }
  ];

var $food = $('#food'),
    $drink = $('#drink'),
    $result = $('#result');

$food.change(function () {
    onChange();
});

$drink.change(function () {
    onChange();
});

function onChange() {
    var findedRestaurants = findRestaurants();
    showRestaurants(findedRestaurants);
}

function findRestaurants() {
    return filter($food.find('option:selected').val(), $drink.find('option:selected').val());
}

function filter(food, drink) {
    var result = [];

    for (var i = 0; i < restaurants.length; i++) {
        var restaurant = restaurants[i].restaurant;
        if ((!food || restaurant.food === food) && (!drink || restaurant.drink === drink)) {
            result.push(restaurant);
        }
    }

    return result;
}

function showRestaurants(restaurants) {
    $result.empty();
    for (var i = 0; i < restaurants.length; i++) {
        $result.append($('<li>' + restaurants[i].name + '</li>'));
    }
}

onChange();

var=[
{
“餐厅”：{
“名称”：“麦当劳”，
“食物”：“汉堡”，
“饮料”：“可乐”，
“内容”：“Lorem ipsum dolor sit amet”
}
},
{
“餐厅”：{
“名称”：“肯德基”，
“食物”：“鸡肉”，
“饮料”：“百事可乐”，
“内容”：“Lorem ipsum dolor sit amet”
}
},
{
“餐厅”：{
“名称”：“必胜客”，
“食物”：“比萨饼”，
“饮料”：“雪碧”，
“内容”：“Lorem ipsum dolor sit amet”
}
},
{
“餐厅”：{
“姓名”：“多米诺骨牌”，
“食物”：“比萨饼”，
“饮料”：“根啤酒”，
“内容”：“Lorem ipsum dolor sit amet”
}
},
{
“餐厅”：{
“姓名”：“大力水手”，
“食物”：“鸡肉”，
“饮料”：“薄雾”，
“内容”：“Lorem ipsum dolor sit amet”
}
}
];
变量$food=$（“#food”），
$饮料=$（“#饮料”），
$result=$（“#result”）；
$food.change（功能（）{
onChange（）；
});
$drink.change（函数（）{
onChange（）；
});
函数onChange（）{
var findedRestaurants=findRestaurants（）；
展示餐厅（findedRestaurants）；
}
函数findRestaturants（）{
返回过滤器（$food.find（'option:selected'）.val（），$drink.find（'option:selected'）.val（））；
}
功能过滤器（食品、饮料）{
var结果=[]；
对于（变量i=0；i<0.length；i++）{
var restaurant=餐厅[i]。餐厅；
如果（（！food | | | restaurant.food==食品）和（！drink | | restaurant.drink==饮料））{
结果：推（餐厅）；
}
}
返回结果；
}
功能展示餐厅（餐厅）{
$result.empty（）；
对于（变量i=0；i<0.length；i++）{
$result.append（$（'
'+餐厅[i].name+'
'）；
}
}
onChange（）；

您可以迭代JSON数组，并在适当的地方进行条件筛选。你需要一个例子吗？如果是这样，请给我们一个JSON数组的例子。您可以直接在您的帖子中添加此内容。谢谢您的快速回复。我编辑了我的帖子，并添加了一个json数组的示例。因为您没有使用

angular.js

，所以我不会将此作为答案，但我建议在这种特殊情况下使用它。这是一个实时演示：文档可以在这里找到：更接近您的问题，这将适合作为一个非常基本的开始：缺少每个对象的

餐厅
属性ooh:P，我将修复返回的对象是对原始数组对象的引用吗？我需要修改原始数组中的数组元素
function customFilter(food, drink) {
   return function(el) {
      var r = el.restaurant;
      return r.food === food && r.drink === drink;
   }
}

restaurants.filter( customFilter('Burger', 'Coke') );

function customFilter(values) {
   return function(el) {
      var r = el.restaurant;
      var keys = Object.keys( values );
      var answer = true;

      for( var i = 0, len = keys.length; i < len; i++) {
          if( r[keys[i]] !== values[keys[i]] ) {
              answer = false;
              break;
          }
      }

      return answer;
   }
}

restaurants.filter( customFilter({'food':'Burger', 'drink': 'Coke'}) );    

<label for="food">Food:</label>
<select id="food">
    <option value="">Any</option>
    <option value="burger">Burger</option>
    <option value="chicken">Chicken</option>
    <option value="pizza">Pizza</option>
</select>

<label for="drink">Drink:</label>
<select id="drink">
    <option value="">Any</option>
    <option value="coke">Coke</option>
    <option value="pepsi">Pepsi</option>
    <option value="sprite">Sprite</option>
    <option value="root beer">Root beer</option>
    <option value="mist">Mist</option>
</select>

<ul id="result"></ul>

var restaurants = [
    {
        "restaurant": {
            "name": "McDonald's",
            "food": "burger",
            "drink": "coke",
            "content": "Lorem ipsum dolor sit amet"
        }
    },
    {
        "restaurant": {
            "name": "KFC",
            "food": "chicken",
            "drink": "pepsi",
            "content": "Lorem ipsum dolor sit amet"
        }
    },
    {
        "restaurant": {
            "name": "Pizza Hut",
            "food": "pizza",
            "drink": "sprite",
            "content": "Lorem ipsum dolor sit amet"
        }
    },
    {
        "restaurant": {
            "name": "Dominos",
            "food": "pizza",
            "drink": "root beer",
            "content": "Lorem ipsum dolor sit amet"
        }
    },
    {
        "restaurant": {
            "name": "Popeyes",
            "food": "chicken",
            "drink": "mist",
            "content": "Lorem ipsum dolor sit amet"
        }
    }
  ];

var $food = $('#food'),
    $drink = $('#drink'),
    $result = $('#result');

$food.change(function () {
    onChange();
});

$drink.change(function () {
    onChange();
});

function onChange() {
    var findedRestaurants = findRestaurants();
    showRestaurants(findedRestaurants);
}

function findRestaurants() {
    return filter($food.find('option:selected').val(), $drink.find('option:selected').val());
}

function filter(food, drink) {
    var result = [];

    for (var i = 0; i < restaurants.length; i++) {
        var restaurant = restaurants[i].restaurant;
        if ((!food || restaurant.food === food) && (!drink || restaurant.drink === drink)) {
            result.push(restaurant);
        }
    }

    return result;
}

function showRestaurants(restaurants) {
    $result.empty();
    for (var i = 0; i < restaurants.length; i++) {
        $result.append($('<li>' + restaurants[i].name + '</li>'));
    }
}

onChange();