JSFiddle - React, Tailwind, and code Playground

by jun68ykt

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<form id="search" name="search">
  色
  <select name="colors" id="colors" multiple>
    <option value="">指定しない</option>
    <option value="red">赤</option>
    <option value="blue">青</option>
    <option value="green">緑</option>
  </select>
  
  形
  <select name="types" id="types" multiple>
    <option value="">指定しない</option>
    <option value="square">四角</option>
    <option value="circle">丸</option>  
  </select>
  
  <input type="submit" value="検索" />
</form>
<hr />
<div id="items"></div>

CSS

select option { font-size: 16pt; }

.red { color: red; }
.blue { color: blue; }
.green { color: green; }

.square::before { content: "■"; }
.circle::before { content: "●"; }

JavaScript

$(function() {

  function outputResults(results) {
    // 変数の初期化
    var html = '';
    
    // 受け取った配列をループで処理
    // 出力するHTMLの整形
    $.each(results, function() {
      html += '<div class="item ' + this.color + ' ' + this.type + '">';
      html += this.name;
      html += '</div>'; 
    });
    
    // HTMLに出力
    $('#items').empty().append(html);
  }

  var items = [
    { name: "赤い四角", color: "red", type: "square" },
    { name: "赤い丸", color: "red", type: "circle" },
    { name: "青い四角", color: "blue", type: "square" },
    { name: "青い丸", color: "blue", type: "circle" },
    { name: "緑の四角", color: "green", type: "square" },
    { name: "緑の丸", color: "green", type: "circle" },
  ];
  
  // ページ読み込み時はすべてのアイテムを出力する
  outputResults(items);

  // 検索が押された時の処理
  $('#search').on('submit' , function(event){
    
    // デフォルトのイベントをキャンセル
    event.preventDefault();
        
    // 検索項目のオブジェクトを作成してセレクトボックスの値を格納
    var query = {
      colors: $('#colors').val(),
      types: $('#types').val(),
    };
          
    // データの中から一致するオブジェクトを検索
    var results = _.filter(items, function(item) {      
      return (
        (query.colors.includes("") || query.colors.includes(item.color)) &&
        (query.types.includes("") || query.types.includes(item.type))
      );
    });
        
    // 返ってきた配列で出力処理
    outputResults(results);
  });

});