絞り込み検索のボタンを押した際に、ラジオボタンで選択されている項目のみフィルタリングをし、DOMを表示させたいです。
なお、データはJSONを使用いたします。
現状の記述ですと、以下のJSONのmember_categoryでしか検索ができず、
条件が増えた際のフィルタリング方法ができておりません。
何か解決するためのいいアドバイスをいただけますと幸いです。。。
例えば、
・「member_category」+「member_name」を合わせた条件で検索
・「member_category」+「member_name」+「item_name」を合わせた条件で検索
といったことを実現したいです。
■JSON
{ "member_id": 0, "member_category": "Katsura", "member_name": "Ryo", "item_id": 0, "item_name": "item_name[00]", "item_src": "./inc/img/item00.jpg" }, { "member_id": 1, "member_category": "Katsura", "member_name": "Hiroko", "item_id": 1, "item_name": "item_name[01]", "item_src": "./inc/img/item01.jpg" }, { "member_id": 2, "member_category": "Hiroshima", "member_name": "Sei", "item_id": 2, "item_name": "item_name[02]", "item_src": "./inc/img/item02.jpg" }, { "member_id": 3, "member_category": "Hiroshima", "member_name": "Yukiko", "item_id": 3, "item_name": "item_name[03]", "item_src": "./inc/img/item03.jpg" }, { "member_id": 4, "member_category": "Hiroshima", "member_name": "Kanoko", "item_id": 4, "item_name": "item_name[04]", "item_src": "./inc/img/item04.jpg" } ]
■HTML
<div class="member"> <h2>メンバー</h2> <input type="radio" name="member" value="Katsura"> <input type="radio" name="member" value="Hiroshima"> <input type="radio" name="member" value="Maizuru"> </div> <div class="name"> <h2>名前</h2> <input type="radio" name="name" value="Ryo"> <input type="radio" name="name" value="Hiroko"> <input type="radio" name="name" value="Sei"> <input type="radio" name="name" value="Yukiko"> <input type="radio" name="name" value="Kanoko"> </div> <ul id="list"></ul> <div><input class="search" type="submit" name="" value="絞り込み検索"></div>
■JS
(function(window,namespace,$){ function _Item(dataFilter,i,$_list){ this.member_id = dataFilter[i].member_id; this.member_category = dataFilter[i].member_category; this.member_name = dataFilter[i].member_name; this.item_id = dataFilter[i].item_id; this.item_name = dataFilter[i].item_name; this.item_src = dataFilter[i].item_src; this.addList($_list); } _Item.prototype.addList = function($_list){ $_list.append( '<li>' + '<figure><img src="' + this.item_src + '"/></figure>' + '<span>' + this.member_id + '</span>' + '<span>' + this.member_name + '</span>' + '<span>' + this.member_category + '</span>' + '<span>' + this.item_id + '</span>' + '<span>' + this.item_name + '</span>' + '</li>' ); } window[namespace] = { init: function(json){ var data = json; this.getDataAll(data); this.change(data); }, change: function(data){ var that = this; $('.search').on('click',function(){ var value = $('.member input[name="member"]:checked').val(); _case(data,'member_category',value); }); function _case(data,subject,value){ that.getDataFilter(data,value,subject); } }, getDataAll: function(data){ var dataFilter = data; this.display(dataFilter); }, getDataFilter: function(data,value,subject){ var dataAll = data; var dataFilter = []; var str = new RegExp(value,'i'); dataFilter = dataAll.filter(function(item,index){ if(item[subject].match(str)){ return true; }; }); this.display(dataFilter); }, display: function(dataFilter){ var len = dataFilter.length; var $_list = $('#list'); $_list.empty(); for (var i = 0; i < len; i++) { new _Item(dataFilter,i,$_list); }; } } })(this,'DataBind',jQuery);
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/05 08:22
2019/02/05 08:31