質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.91%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 902

score 120

 前提・実現したいこと

以下のコードで絞り込み検索を実装したいと考えています。
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については初心者で初歩的な質問であれば恐縮です。
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • dice142

    2018/10/24 13:46

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

    キャンセル

  • unotalk

    2018/10/24 17:17

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

    キャンセル

  • dice142

    2018/10/24 17:25

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

    キャンセル

  • unotalk

    2018/10/24 17:37

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

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る