JavaScriptによるドロップダウンの絞り込み検索

Question

前提・実現したいこと

以下のコードで絞り込み検索を実装したいと考えています。
https://codepen.io/rustybailey/pen/GJjvYB

ただ、カスタマイズをしたいのですがそのいい方法が思い浮かばず悩んでいます。
ご教示いただけると幸いです。

1.フィルターは3つ用意したい。
・CodePenではフィルターは1つですが、A、B、C、3つ用意したいです。
・単純に3回コードを繰り返して書いてみたのですが、不格好でなにか他にいい方法がないかお聞きしたいです。

2.「または」「かつ」を変更したい
・現状、チェックした要素すべてに一致するものの結果が返ってきますが、どれかに一致するものを結果として返したいです。
・逆にA,B,Cの要素それぞれに対しては「かつ」で結果を返したいです。

以下は、CodePenでのコードを基に自分で作成したコードです。
JavaScriptについては初心者のため、PHPも多少使っていますが、JavaScriptのみでの方法でもPHPを併用した方法でもどちらでも大丈夫です。
ご回答の際は、以下のソースコードを基本にご回答いただけると助かります。

該当のソースコード

<form method="GET" action="<?php echo get_site_url().'/house-makers'; ?>">
<div class="row">
<?php
$maker_options = array('施工エリア' => 'area', '取扱い工法' => 'method', '参考坪単価' => 'price');
foreach ($maker_options as $key => $maker_option) {?>
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
  <div class="dropdown-container">
      <div class="dropdown-button-<?php echo $maker_option; ?> noselect">
          <div class="dropdown-label"><?php echo $key; ?></div>
          <div class="dropdown-quantity">(<span class="quantity">Any</span>)</div>
          <i class="fa fa-filter"></i>
      </div>
      <div class="dropdown-list" style="display: none;">
          <input type="search" placeholder="<?php echo $key; ?>を検索" class="dropdown-search"/>
          <ul class="ul-dropdown"></ul>
      </div>
  </div>
</div>
<?php } ?>
<div class="w-100 p-4">
<center><input type="submit" value="検索" class="btn w-50"></center>
</div>
</form>

// Filter Search
jQuery( document ).ready( function( $ ) {
$('.dropdown-container').eq(0).
on('click', '.dropdown-button-area', function () {
    $('.dropdown-list').eq(0).toggle();
}).
on('input', '.dropdown-search:eq(0)', function () {
    var target = $(this);
    var search = target.val();

    if (!search) {
        $('.li-dropdown-area').show();
        return false;
    }

    $('.li-dropdown-area').each(function () {
        var text = $(this).text();
        var match = text.indexOf(search) > -1;
        $(this).toggle(match);
    });
}).
on('change:eq(1)', '[type="checkbox"]', function () {
    var numChecked = $('[type="checkbox"]:checked').length;
    $('.quantity').eq(0).text(numChecked || 'Any');
});
});

// JSON of States for demo purposes

var areaCity = [
{ name: 'A市', slugArea: 'asi' },
{ name: 'B市', slugArea: 'bsi' },
{ name: 'C市', slugArea: 'csi' },
{ name: 'D市', slugArea: 'dsi' },
{ name: 'E市', slugArea: 'esi' }];

// <li> template
var areaTemplate = _.template(
'<li class="li-dropdown-area">' +
'<label for="<%= slugArea %>">' +
'<input name="area[]" type="checkbox" value="<%= slugArea %>">' +
'<%= capName %></label>' +
'</li>');


// Populate list with states
jQuery( document ).ready( function( $ ) {
  _.each(areaCity, function (s) {
    s.capName = s.name;
    $('.ul-dropdown').eq(0).append(areaTemplate(s));
});
} );
//# sourceURL=pen.js

jQuery( document ).ready( function( $ ) {
$('.dropdown-container').eq(1).
on('click', '.dropdown-button-method', function () {
    $('.dropdown-list').eq(1).toggle();
}).
on('input', '.dropdown-search:eq(1)', function () {
    var target = $(this);
    var search = target.val();

    if (!search) {
        $('.li-dropdown-method').show();
        return false;
    }

    $('.li-dropdown-method').each(function () {
        var text = $(this).text();
        var match = text.indexOf(search) > -1;
        $(this).toggle(match);
    });
}).
on('change', '[type="checkbox"]', function () {
    var numChecked = $('[type="checkbox"]:checked').length;
    $('.quantity').eq(1).text(numChecked || 'Any');
});
});


var methodType = [
{ name: '2×4、2×6', slugMethod: '2x4-2x6' },
{ name: '木造軸組', slugMethod: 'wooden' },
{ name: '軽量鉄骨', slugMethod: 'light_gauge_steel' },
{ name: '重量鉄骨', slugMethod: 'heavy_gauge_steel' },
{ name: 'RC', slugMethod: 'rc' },
{ name: 'コンクリート系プレハブ', slugMethod: 'concrete-prefub' },
{ name: ' 木質系プレハブ', slugMethod: 'wooden-prefub' },
{ name: '鉄骨系プレハブ', slugMethod: 'steel-prefub' }];



var methodTemplate = _.template(
'<li class="li-dropdown-method">' +
'<label for="<%= slugMethod %>">' +
'<input name="methods[]" type="checkbox" value="<%= slugMethod %>">' +
'<%= capName %></label>' +
'</li>');

jQuery( document ).ready( function( $ ) {
  _.each(methodType, function (s) {
    s.capName = s.name;
    $('.ul-dropdown').eq(1).append(methodTemplate(s));
});
});

//# sourceURL=pen.js



jQuery( document ).ready( function( $ ) {
$('.dropdown-container').eq(2).
on('click', '.dropdown-button-price', function () {
    $('.dropdown-list').eq(2).toggle();
}).
on('input', '.dropdown-search:eq(2)', function () {
    var target = $(this);
    var search = target.val();

    if (!search) {
        $('.li-dropdown-price').show();
        return false;
    }

    $('.li-dropdown-price').each(function () {
        var text = $(this).text();
        var match = text.indexOf(search) > -1;
        $(this).toggle(match);
    });
}).
on('change:eq(2)', '[type="checkbox"]', function () {
    var numChecked = $('[type="checkbox"]:checked').length;
    $('.quantity').eq(2).text(numChecked || 'Any');
});
});

var priceRange = [
{ name: '20万円台', slugPrice: '20' },
{ name: '30万円台', slugPrice: '30' },
{ name: '40万円台', slugPrice: '40' },
{ name: '50万円台', slugPrice: '50' },
{ name: '60万円台', slugPrice: '60' },
{ name: '70万円台以上', slugPrice: '70' }];

var priceTemplate = _.template(
'<li class="li-dropdown-price">' +
'<label for="<%= slugPrice %>">' +
'<input name="price[]" type="checkbox" value="<%= slugPrice %>">' +
'<%= capName %></label>' +
'</li>');

jQuery( document ).ready( function( $ ) {
  _.each(priceRange, function (s) {
    s.capName = s.name;
    $('.ul-dropdown').eq(2).append(priceTemplate(s));
});
});

//# sourceURL=pen.js

JavaScriptについては初心者で初歩的な質問であれば恐縮です。
よろしくお願いいたします。

Comments

[dice142]

コードにPHPが使われていますが、JavaScriptのみで実現したいという質問でしょうか？

[unotalk]

いえ、JavaScriptのみでなくても問題ありません。JavaScriptについては初心者のため、PHPも使っているだけです。また、この質問に載せているコードは自分でカスタマイズしたもので、CodePenに載っているものとはやや異なりますが、質問に載せているコードを基本に考えていただけると助かります。質問が正確ではなく失礼しました。

[dice142]

であればタグにPHPを追加し、質問文も修正した方が回答を得られやすいかと思います。

[unotalk]

アドバイスありがとうございます。そのように編集しました。