HTML検索とマルチセレクト（スウォッチ）を使用したフィルタ

Question

私は検索（テキストフィールド）とマルチセレクト（見本）のフィルタリングを検索していましたが、方法を見つけることができませんでした。

両方を交差点として作成したいと考えています。例えば

私がリストを持っている： -

• バナナ（果物）
• オレンジ（果物）
• キャロット（野菜）
• トマト（野菜）
• Rajma（豆）

選択したテキストフィールド（オレンジ）
複数選択（フルーツ野菜豆）今

、私は「オレンジ」を検索し、それはオレンジ返すべきであるとするとき、私の野菜そして「結果なし」も

、私は、果物や野菜を選択し、テキストフィールドをクリックしてください「バナナ、トマト、ニンジン、オレンジ」でのみ検索する必要があります。

両方のフィルタが同時に機能します。

この問題を解決するのを手伝ってください。私はシンプルな機能でsome code（JSFiddleを）書いた

おかげ

Answer 1

。データベースや何らかの種類のものを使用しているわけではないので、要素をフィルタリングするとすべてが見えますが、データベースクエリは必要な要素のみを取得します。
コードを自由にカスタマイズできます。シングルセレクトフィールドも更新したい場合は、関数function updateSingleSelect(){}を実装する必要があります。私はそれを追加しましたが、それを実装していません。私の検索機能から論理を推論することができます。
私は検索の項目としてオブジェクト{name: 'orange', subclass: 'fruit'}を使用しています。