使用搜索和多选（HTML样本）的HTML过滤器

Question

我一直在网上寻找过滤搜索（文本字段）和多选（样本），但无法找到出路。

我想让两者都作为交集。 e.g

我有一个清单： -

• 香蕉（水果）
• 橙子（水果）
• 胡萝卜（蔬菜）
• 番茄（蔬菜）
• Rajma（豆类）

选择文本字段（橙色）
多选（水果蔬菜豆）

现在，当我搜索＆＃34; orange＆＃34;然后它应该返回橙色，当我点击蔬菜然后＆＃34;没有结果＆＃34;

另外，当我选择水果和蔬菜时，文字字段只能搜索＆＃34;香蕉，番茄，胡萝卜和橙子＆＃34;

两个过滤器同时工作。

请帮我解决这个问题。

谢谢

Answer 1

我用简单的功能写了some code（JSFiddle）。请注意，由于我没有使用数据库或任何类型的数据，因此过滤元素会查看所有元素，而数据库查询只能获取所需的元素。
随意自定义代码。如果您还希望单选字段更新，则应实现相应的函数 - function updateSingleSelect(){}。我添加了它，但没有实现它。您可以从我的搜索功能中推断出逻辑 我使用对象{name: 'orange', subclass: 'fruit'}作为搜索项目。