JavaScriptとCSVで作る検索システム

// ページ読み込み後に呼ぶ処理
$(function() {
  getNotice();
  placeholder();
  pageTop();
});

// 検索を行い、結果表示を行う関数
// 引数　：なし
// 戻り値：なし（DOMの変更）
// 備考　：「検索する」ボタン押下時に呼び出される
function onSearch() {
  // 検索開始
  loadingStart();
  $('#searchButton').prop('disabled', true);
  var number = $('#primaryKey').val();
  var freeWord = $('#freeWord').val();
  var csvPath = './data/documents.csv';
  var count = 0;
  var target = '#resultTable';

  // 結果テーブルを初期化
  $(target).empty();

  var getData = function(count){
    $.get(csvPath).done(function(data) {
      var csv = $.csv.toArrays(data, {separator: ',', delimiter: '\n'});
      $(csv).each(function(_index, element) {
        var searchedWord = element[2].split('<br>').join('').split(' ').join('').split('　').join('');
        // 空レコードか否かの確認
        if (element.length > 0) {
          // 表示レコード数が300件を超えたか否かの確認
          if (count <= 300) {
            if(checkNumber(number, element[0]) && checkFreeWord(freeWord, searchedWord)){
              var insert = '';
              insert = '<tr><td class="small break-word">' + element[0] + '</td><td class="small break-word">' + dateFormat(element[1]) + '</td><td class="small break-word">' + element[2] + '</td></tr>';
              $(target).append(insert);
              count += 1;
            }
          } else {
            loadingEnd(count);
            return false;
          }
        }
      });
      loadingEnd(count);
    }).fail(function() {
      // 検索終了
      loadingError();
      return false;
    });
  };
  getData(count);
  // get_dataをメモリから解放（意味があるかはわからない）
  delete getData;
}

// 検索状態に表示を変更するための関数
// 引数　：なし
// 戻り値：なし（DOMの変更）
// 備考　：onSearch()から呼ばれる
function loadingStart(){
  $('#loadingEnd').css('display', 'none');
  $('#loadingStart').css('display', 'block');
  $('#result').css('display', 'block');
}

// 検索完了状態に表示を変更するための関数
// 引数　：なし
// 戻り値：なし（DOMの変更）
// 備考　：onSearch()から呼ばれる
function loadingEnd(recordCount){
  $('#loadingStart').css('display', 'none');
  $('#loadingEnd').css('display', 'block');

  if(recordCount == 301) {
    $('#loadingEnd').html('検索完了！<br>検索結果が300件を超えました。日付が新しいものから300件目以降は表示されません。');
  } else {
    $('#loadingEnd').html('検索完了！<br>検索結果は' + recordCount + '件です。');
  }

  $('#searchButton').prop('disabled', false);
}

// サーバエラー状態に表示を変更するための関数
// 引数　：なし
// 戻り値：なし（DOMの変更）
// 備考　：onSearch()から呼ばれる
function loadingError(){
  $('#loadingStart').css('display', 'none');
  $('#loadingEnd').css('display', 'block');
  $('#loadingEnd').html('エラーが発生しました。再度、検索して下さい。');
  $('#searchButton').prop('disabled', false);
}

// 日付表示を編集するための関数
// 引数　：YYYYMMDD（String）
// 戻り値：YYYY/MM/DD（String）
function dateFormat(str) {
  var result;
  if(str.length == 8) {
      result = str.substr(0,4) +"/"+ str.substr(4,2) + "/" +str.substr(6,2);
  } else {
    result = str;
  }
  return result;
}

// ユーザーが入力した番号とマッチするかを判定するための関数
// 引数　：ユーザーが入力した番号（String）, ドキュメントの主キー（String）
// 戻り値：真偽値（Boolean）
// 備考　：onSearch()から呼ばれる
function checkNumber(inputNumber, number) {
  var result = false;
  console.log(inputNumber);
  console.log(number);
  if(inputNumber == '' || inputNumber == '検索したい番号を入力してください' || inputNumber == number) {
    result = true;
  }
  return result;
}

// 取得したドキュメントが検索条件にマッチするかを判定するための関数
// 引数　：フリーワード（String）, 起案文書（String）
// 戻り値：真偽値（Boolean）
// 備考　：onSearch()から呼ばれる
function checkFreeWord(freeWord, doc) {
  var result = false;
  if(freeWord == '検索したいフリーワードを入力してください') {
    result = true;
  } else if(freeWord.indexOf(',') != -1){
    var freeWordArray = freeWord.split(',');
    var tempBool = true;
    for(var j = 0; j < freeWordArray.length; j++){
      // 全角・半角スペースの削除
      var searchedWord = freeWordArray[j].split(' ').join('').split('　').join('');
      if(doc.indexOf(searchedWord) == -1){
        tempBool = false;
      }
    }
    if(tempBool){
      result = true;
    }
  } else if(doc.indexOf(freeWord.split(' ').join('').split('　').join('')) != -1){
    result = true;
  }
  return result;
}

// お知らせ欄にコンテンツを表示するための関数
// 引数　：なし
// 戻り値：なし（DOMの追加）
// 備考　：画面ロード時に呼ばれる
function getNotice() {
  var path = './data/notice.csv';
  var count = 0;
  var getBool = true;
  var target = '#notice';
  var get_data = function(count){
    $.get(path).done(function(data) {
      var csv = $.csv.toArrays(data, {delimiter: '\n'});
      $(csv).each(function(_index, element) {
        // 空レコードか否かの確認
        if (element.length > 0) {
          // 表示レコード数が30件を超えたか否かの確認
          if (count <= 30) {
            var insert = '';
            insert = '<li class="list-group-item py-2 px-3">' + element + '</li>';
            $(target).append(insert);
            count += 1;
          } else {
            getBool = false;
            return false;
          }
        }
      });
    }).fail(function() {
        return false;
    });
  };
  get_data(count);
}

// ページトップに戻るための関数
// 引数　：なし
// 戻り値：なし
// 備考　：100pxスクロールしたらボタンを表示する
function pageTop() {
  var appear = false;
  var pageTop = $('#pageTop');
  $(window).scroll(function () {
    // 100pxスクロールしたら
    if ($(this).scrollTop() > 100) {
      if (appear == false) {
        appear = true;
        //0.3秒かけて現れる
        pageTop.stop().animate({
          //下から85pxの位置に
          'bottom': '85px'
        }, 300);
      }
    } else {
      if (appear) {
        appear = false;
        // 0.3秒かけて隠れる
        pageTop.stop().animate({
          // 下から-85pxの位置に
          'bottom': '-85px'
        }, 300);
      }
    }
  });
  pageTop.click(function () {
    //0.5秒かけてトップへ戻る
    $('body, html').animate({ scrollTop: 0 }, 500);
    return false;
  });
}

// ie9で非対応のplaceholderに対応するたの関数
// 引数　：なし
// 戻り値：なし
// 備考　：ページロード時に呼ばれる
function placeholder() {
  var supportsInputAttribute = function (attr) {
    var input = document.createElement('input');
    return attr in input;
  };
  if (!supportsInputAttribute('placeholder')) {
    $('[placeholder]').each(function () {
    var
      input = $(this),
      placeholderText = input.attr('placeholder'),
      // placeholderColor = 'GrayText',
      placeholderColor = '#BBBBBB';
      defaultColor = input.css('color');
    input.
      focus(function () {
      if (input.val() === placeholderText) {
        input.val('').css('color', defaultColor);
      }
      }).
      blur(function () {
      if (input.val() === '') {
        input.val(placeholderText).css('color', placeholderColor);
      } else if (input.val() === placeholderText) {
        input.css('color', placeholderColor);
      }
      }).
      blur().
      parents('form').
      submit(function () {
        if (input.val() === placeholderText) {
        input.val('');
        }
      });
    });
  }
}

function onSearch() {
  // 「検索中・・・」という文字列を表示
  loadingStart();

  // 検索ボタンを二重押下できないよう、検索が終わるまで無効化する
  $('#searchButton').prop('disabled', true);

  // フォームからユーザーが入力した内容を取得して、変数に格納する
  var number = $('#primaryKey').val();
  var freeWord = $('#freeWord').val();

  // データが格納されたCSVのパスを変数に格納
  var csvPath = './data/documents.csv';

  // 検索にヒットした件数を記録するための変数
  var count = 0;

  // 結果を表示するHTMLタグのID
  var target = '#resultTable';

  // 検索結果を初期化
  $(target).empty();

  // 一連の検索処理を変数に格納
  var getData = function(count){

    // jQueryのajaxでCSVからデータを取得
    $.get(csvPath).done(function(data) {

      // jquery-csvを利用して、それぞれの行を列ごとに配列に変換
      var csv = $.csv.toArrays(data, {separator: ',', delimiter: '\n'});

      // ２次元配列に変換したデータを１行ずつループで処理
      $(csv).each(function(_index, element) {

        // 検索時にヒットしないことを防ぐため、検索対象のドキュメントから「改行タグ」と「全角・半角スペース」を削除
        // ※GitHubにあげているダミーデータには上記文字は存在しませんが、私の職場で利用しているデータは上記文字が含まれているため入れている処理です
        var searchedWord = element[2].split('<br>').join('').split(' ').join('').split('　').join('');

        // 空レコードか否かの確認
        if (element.length > 0) {

          // 全件表示してしまうと、データ量によってはブラウザがクラッシュしてしまうため、表示レコード数を３００件とするための処理
          if (count <= 300) {

            // ユーザーが入力した番号又はフリーワードが含まれているか否かのチェック処理
            if(checkNumber(number, element[0]) && checkFreeWord(freeWord, searchedWord)){

              // 表示対象である場合は、HTMLにデータを挿入する
              var insert = '';
              insert = '<tr><td class="small break-word">' + element[0] + '</td><td class="small break-word">' + dateFormat(element[1]) + '</td><td class="small break-word">' + element[2] + '</td></tr>';
              $(target).append(insert);

              // 件数をインクリメント
              count += 1;
            }
          } else {

            // 表示件数上限である300件を超えていた場合は、「表示件数」と「検索が完了した」旨を表示する
            loadingEnd(count);
            return false;
          }
        }
      });

      // 「表示件数」と「検索が完了した」旨を表示する
      loadingEnd(count);
    }).fail(function() {

      // ajaxが失敗した場合は、「エラーが発生した」旨を表示する
      loadingError();
      return false;
    });
  };

  // 一連の検索処理を実行する
  getData(count);

  // get_dataをメモリから解放（意味があるかはわからない）
  delete getData;
}