-
絞り込み検索ができるwidgetを作りたい
トピックス by
1792 pt
2023年11月1日 10:26
210
PV
【Widget名】
絞り込み検索付き評価リンク※要javascript(自動表示)
【相談内容】
下部についているボタンが「すべての選択を解除」ではなく「検索する」で昨日としては絞込検索ができるようにしたいと考えております。
-
1 コメント
-
該当Widgetを下記のとおり変更することで「ボタンを押して絞り込み検索」の仕様に変更可能です！
Widget名：絞り込み検索付き評価リンク※要javascript
【javascript】
javascriptHead用の記述を下記に差し替え
<script>
var sbRefineSearch02 = sbRefineSearch02 || {};
(function(_) {
const target = '.js-refine-search';
_.setRefineSearch02 = function(el) {
const countResults = el.querySelectorAll('.num-result .num');
let resetBtn = el.querySelector('.js-reset');
const results = [];
Array.from(el.querySelectorAll('.refine-search-result'), result => {
let addResult = {};
addResult.el = result;
addResult.filter = result.dataset.filter ? result.dataset.filter.split(',') : [];
results.push(addResult);
});
const filterForm = el.querySelector('form[name="refine-search-filter"]');
resetBtn.addEventListener('click', setResult);
function setResult() {
let filter = [];
Array.from(filterForm.querySelectorAll('input[value]:checked'), input => filter.push(input.value));
let count = 0;
results.forEach((result) => {
let isMatch = true;
filter.some((value) => {
if (!result.filter.includes(value)) {
isMatch = false;
return true;
}
});
if (isMatch) {
result.el.style.display = 'block';
count++;
} else {
result.el.style.display = 'none';
}
if (filter.length === 0) {
result.el.style.display = 'none';
};
});
countResults.forEach((countResult) => countResult.textContent = count);
}
}
_.init = function() {
Array.from(document.querySelectorAll(target), el => {
_.setRefineSearch02(el);
});
};
})(sbRefineSearch02);
</script>【HTML】
ボタンを変更
・変更前
<button class="resetBtn js-reset" disabled="">すべての選択を解除</button>
・変更後
<button type="button" class="resetBtn js-reset">検索する</button>