Skip to main content
コード部分をコードブロックに修正、タグの追加
ソース リンク

JS

var searchBox = '.search-box';var searchItem = '.search-box input';var listItem = '.cat_image';var hideClass = 'is-hide';$(function(){$(document).on('change', searchBox + ' input', function(){search_filter();});});function search_filter(){$(listItem).removeClass(hideClass);for(var i = 0; i = 0){arrCheck = true;break;}}return arrCheck;}

JavaScript

CSS

<script>
var searchBox = '.search-box';
var searchItem = '.search-box input';
var listItem = '.cat_image';
var hideClass = 'is-hide';

$(function() {
   $(document).on('change', searchBox + ' input', function() {
    search_filter();
  });
});

function search_filter() {
  $(listItem).removeClass(hideClass);
  for (var i = 0; i < $(searchBox).length; i++) {
    var name = $(searchBox).eq(i).find('input').attr('name');
    var searchData = get_selected_input_items(name);
    if(searchData.length === 0 || searchData[0] === '') {
      continue;
    }
    for (var j = 0; j < $(listItem).length; j++) {
      var itemData = get_setting_values_in_item($(listItem).eq(j), name);
      var check = array_match_check(itemData, searchData);
      if(!check) {
        $(listItem).eq(j).addClass(hideClass);
      }
    }
  }
}

function get_selected_input_items(name) {
  var searchData = [];
  $('[name=' + name + ']:checked').each(function() {
    searchData.push($(this).val());
  });
  return searchData;
}

function get_setting_values_in_item(target, data) {
  var itemData = target.data(data);
  if(!Array.isArray(itemData)) {
    itemData = [itemData];
  }
  return itemData;
}

function array_match_check(arr1, arr2) {
  var arrCheck = false;
  for (var i = 0; i < arr1.length; i++) {
    if(arr2.indexOf(arr1[i]) >= 0) {
      arrCheck = true;
      break;
    }
  }
  return arrCheck;
}
</script>

(class名).is-hide {
display: none;
}CSS

(class名).is-hide {
    display: none;
}

JS

var searchBox = '.search-box';var searchItem = '.search-box input';var listItem = '.cat_image';var hideClass = 'is-hide';$(function(){$(document).on('change', searchBox + ' input', function(){search_filter();});});function search_filter(){$(listItem).removeClass(hideClass);for(var i = 0; i = 0){arrCheck = true;break;}}return arrCheck;}

CSS

(class名).is-hide {
display: none;
}

JavaScript

<script>
var searchBox = '.search-box';
var searchItem = '.search-box input';
var listItem = '.cat_image';
var hideClass = 'is-hide';

$(function() {
   $(document).on('change', searchBox + ' input', function() {
    search_filter();
  });
});

function search_filter() {
  $(listItem).removeClass(hideClass);
  for (var i = 0; i < $(searchBox).length; i++) {
    var name = $(searchBox).eq(i).find('input').attr('name');
    var searchData = get_selected_input_items(name);
    if(searchData.length === 0 || searchData[0] === '') {
      continue;
    }
    for (var j = 0; j < $(listItem).length; j++) {
      var itemData = get_setting_values_in_item($(listItem).eq(j), name);
      var check = array_match_check(itemData, searchData);
      if(!check) {
        $(listItem).eq(j).addClass(hideClass);
      }
    }
  }
}

function get_selected_input_items(name) {
  var searchData = [];
  $('[name=' + name + ']:checked').each(function() {
    searchData.push($(this).val());
  });
  return searchData;
}

function get_setting_values_in_item(target, data) {
  var itemData = target.data(data);
  if(!Array.isArray(itemData)) {
    itemData = [itemData];
  }
  return itemData;
}

function array_match_check(arr1, arr2) {
  var arrCheck = false;
  for (var i = 0; i < arr1.length; i++) {
    if(arr2.indexOf(arr1[i]) >= 0) {
      arrCheck = true;
      break;
    }
  }
  return arrCheck;
}
</script>

CSS

(class名).is-hide {
    display: none;
}
ソース リンク

HPに絞り込み検索結果数を表示したい。

jQuery初心者です。
下記のjQueryの検索機能(絞り込み検索)を自社サイトに導入しようとしています。
このスクリプトにコードを追加して、絞り込み表示件数を表示したいのですが、スクリプトの知識もなく、どうすれば良いのかわかりません。
ご教授いただけると大変助かります。何卒よろしくお願いします。

参考サイト:
https://www.atelier-sunko.info/entry/refine-search-box


JS

var searchBox = '.search-box'; var searchItem = '.search-box input'; var listItem = '.cat_image'; var hideClass = 'is-hide'; $(function() { $(document).on('change', searchBox + ' input', function() { search_filter(); }); }); function search_filter() { $(listItem).removeClass(hideClass); for (var i = 0; i = 0) { arrCheck = true; break; } } return arrCheck; }

CSS

(class名).is-hide {
display: none;
}