0

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

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

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;
}
4
  • 参考サイトに結構詳しく書かれていて、コピペすれば動くようなことも書かれていますが、それを見て分からないということは、何も分からないという話になってしまいますが、そうなのですか?
    – WebSurfer
    Commented 6月5日 1:36
  • 1
    検索というと、自分が想像するのは、DB にある商品データなどをユーザーが指定した検索条件でサーバーにある Web アプリで抽出して、その結果を応答として返すというものです。もしそうだとすると、JavaScript / jQuery だけでは何ともならないのですが、そのあたりは認識してますか?
    – WebSurfer
    Commented 6月5日 1:39
  • 「件数の表示」の前に、そもそもホームぺージに検索の機能は備わっていますか?
    – cubick
    Commented 6月5日 2:00
  • 1
    実際に条件で絞り込み表示できる状態までは自力で出来ましたが、件数の表示はカスタマイズできないでいました。DBを利用するには私ではハードルが高すぎて、また件数も80件ほどでしたので絞り込み検索を選択しました。このサイトのおかげで実装することができました。皆様、ありがとうございます。
    – SUP TARO
    Commented 6月5日 23:47

1 件の回答 1

0

全要素数から非表示になっている要素数を引くことで件数を計算できます。

まず、フィルターされた結果の件数を表示する個所を既存の HTML に追加します。
以下を既存の HTML に追加してください。件数部分の id を filteredResultsCount としてます。

<div>表示件数: <span id="filteredResultsCount"></span>件</div>

次に、表示数をカウントし、表示個所にカウントを設定する関数を定義します。

function showFilteredResultsCount() {
  // 要素数 - 非表示要素数 を計算
  const resultsCount =
    $(listItem).length - $(`${listItem}.${hideClass}`).length;
  // 計算結果を表示個所に設定
  $('#filteredResultsCount').text(resultsCount);
}

最後に、フィルター処理の後に、表示数をカウントし、表示個所にカウントを設定する関数を呼び出します。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);
      }
    }
  }
  
  // ここまでは変更なし。
  
  // カウントを表示
  showFilteredResultsCount();
}

これで、フィルター操作をするごとに、表示件数が画面上にも表示されるようになると思います。

また、ページロード時にも件数の表示を行いたい場合は、以下のようにします。

$(function () {
  // ページロード時にカウントを表示
  showFilteredResultsCount();
});
4
  • hiromasa masuda様 おかげさまで件数が画面上に表示されるようになりました。(最初は表示件数が表示されず、絞り込みを行う事で件数が表示されるようになりました。)本当にありがとうございます。大変恐縮ですが最初の段階で全てのlistItemの数(.hideClassがついていない数)を表示させることは可能でしょうか?
    – SUP TARO
    Commented 6月6日 0:29
  • カウントの計算及び表示処理を関数として分離して、任意の場所で呼べるように回答を修正しました。これで、ページロード時にこの関数を呼ぶことで、初期状態で件数が表示されます。 Commented 6月6日 11:33
  • 1
    hiromasa masuda様 完璧です。助かりました。涙。完全に動作し、解決できました。本当にありがとうございます!心から感謝申し上げます。
    – SUP TARO
    Commented 6月7日 11:15
  • もし、私の回答が解決につながったのであれば、解決済を表現するためにも、回答を承認いただければと思います。 Commented 6月7日 11:57

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。