jqueryを使用したCSV検索機能の実装したい

Question

phpが使えない環境にて、jqueryを使用した検索機能を実装中につまづいています。

初心者なりになんとか実装したものの、100件程度のcsvなら問題ないのですが、2000件程度のcsvだと処理にかなり時間がかかってしまい、タイムアウトしてしまいます。
何かいい解決方法はありますでしょうか？
csvの読み込みにはjqueryのプラグインjquery.csv.jsを使用しています。
ご教示いただけますと幸いです。

試したこと

いったんcsvの中身を出力して、クラスのkクラスの付け外しで表示を切り替えているところ等、
処理の効率が悪いことが原因なのは分かるのですが、、、解決策がわからず、八方塞がりの状態です、、、

目指したい挙動

＜セレクトボックス＞
都道府県：選択してください
市区町村：選択してください
↓
＜セレクトボックス＞
都道府県：北海道

を選択した場合
↓
csv、1列目に北海道と記載のある市区町村を

＜セレクトボックス＞
市区町村：選択してください

のセレクトボックスに表示
↓
＜セレクトボックス＞
都道府県：北海道
市区町村：札幌市中央区

を選択した場合
↓
下記のcsvの情報が出力される
北海道　,札幌市中央区,○,○,ダミーテキスト,○,○,○,○,○,○,○,○,○

codepen（csvはリンクされていません）

https://codepen.io/fumiya-nakamura/pen/xxPjrmy

css

		/* 表示切り替え用css */
		.shityouson option,
		.ichiran li {
			display: none;
		}

		.shityouson option.is-visible,
		.ichiran li.is-visible {
			display: block;
		}

現状の仕組み

①読み込み事にリストを読み込みんでcssで非表示。
セレクトボックスの値によって非表示の状態のリスト

html

	<form action="" id="result">
		県：<select name="example1" class="ken">
		</select><br><br>
		市区町村：<select name="example2" class="shityouson">
		</select>
		<br><br>
		<ul class="ichiran"></ul>
	</form>

jquery

//csvを読み込み
$(function () {
    $.get('../../../data.csv', function (data) {
        var csv = $.csv()(data);
        $(csv).each(function () {
            if (this[0] && this[1] && this[2] && this[3] && this[4]) {
                $("#csv").append("<tr><td>" + this[0] + "</td><td>" + this[1] + "</td><td>" + this[2] + "</td><td>" + this[3] + "</td></tr>");
                $(".ken").append('<option class="post" data-ken_name=' + this[0] + '>' + this[0] + "</option>");
                $(".shityouson").append('<option class="post" data-shityouson="' + this[0] + '">' + this[1] + "</option>");

                $(".ichiran").append('<li data-shityouson="' +
                    this[1] + '"><h2>ダミーテキスト</h2><table><tr><th>ダミーテキスト</th><td>' +
                    this[2] + '</td></tr><tr><th>ダミーテキスト</th><td>' +
                    this[3] + '</td></tr></table><br><h2>ダミーテキスト</h2><table><tr><th>ダミーテキスト</th><td>' +
                    this[5] + '</td></tr><tr><th>ダミーテキスト</th><td>' +
                    this[6] + '</td></tr></table><br><h2>ダミーテキスト</h2><table><tr><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th><th>日</th></tr><tr><td>' +
                    this[7] + '</td><td>' +
                    this[8] + '</td><td>' +
                    this[9] + '</td><td>' +
                    this[10] + '</td><td>' +
                    this[11] + '</td><td>' +
                    this[12] + '</td><td>' +
                    this[13] + '</td></tr></table><br><h2>ダミーテキスト</h2><p>' +
                    this[4] + '</p><br><h2>ダミーテキスト</h2><p>' +
                    this[4] + '</p></li>');
            }
        })
    })
});

window.addEventListener('load', function () {
    //同じ都道府県を削除
    $('.post').filter(
        function () {
            const t = $(this).text();
            return this !== $(`.post:contains('${t}')`).get(0);
        }
    ).remove();

    //都道府県によって市町村を表示
    $('.ken').change(function () {
        var ken_name = $(this).val();
        $('.shityouson option').each(function (index) {
            const userId = ken_name;
            const data = document.querySelectorAll('[data-shityouson="' + userId + '"]');
            $(this).removeClass('is-visible');
            $('[data-shityouson="' + userId + '"]').addClass('is-visible');
        });
    });

    //該当する市町村の情報を表示
    $('.shityouson').change(function () {
        const result = $('.shityouson').val();
        $(".ichiran li").each(function (index) {
            $(this).removeClass('is-visible');
            var li_result = $(this).attr('data-shityouson');
            if (li_result === result) {
                $(this).addClass('is-visible');
            }
        });
    });
});

csv

北海道　,札幌市中央区,○,○,ダミーテキスト,○,○,○,○,○,○,○,○,○
北海道　,札幌市北区,○,○,ダミーテキスト,○,○,○,○,○,○,○,○,○
〜
沖縄県　,八重山郡与那国町,○,○,ダミーテキスト,○,○,○,○,○,○,○,○,○

Comments

[退会済みユーザー]

何の処理に時間がかかっているか、細かく区切って測定できると良いですが。each()で回すと1行ずつの処理になるので、例えば1行ごとに出力せず10行まとめてから出力するとか、やり方を変えてみると見えてくるかもしれません。

[happy_girl]

ご返答ありがとうございます。
おっしゃる通り、切り分けをしたところ、
$(".ichiran li").each(function (index) {
の箇所が重い処理になっていそうです、、、

今回の仕様ですと該当のcsvデータを表示する機能の実装になるのですが、10行まとめてから出力というのがどういった処理で当てはまるのか想像が追いついておりません。。。

[yambejp]

何をどうしたときにどういう結果がほしいのか説明したほうが良いと思います

[happy_girl]

言葉足らずで申し訳ありません。
都道府県と市町村を選択した際に、該当の情報をcsvから引っ張ってきて表示させたいです。
（1列目に都道府県、2列目に市区町村、3列目以降に該当地区の情報）

＜セレクトボックス＞
都道府県：選択してください
市区町村：選択してください
↓
＜セレクトボックス＞
都道府県：北海道

を選択した場合
↓
csv、1列目に北海道と記載のある市区町村を

＜セレクトボックス＞
市区町村：選択してください

のセレクトボックスに表示
↓
＜セレクトボックス＞
都道府県：北海道
市区町村：札幌市中央区

を選択した場合
↓
下記のcsvの情報が出力される
北海道　,札幌市中央区,○,○,ダミーテキスト,○,○,○,○,○,○,○,○,○

Answer 1

とりあえずcsvのメソッドは$.csv.toArrays()

sample

csvの取り込み部分だけjQueryを利用しておきます

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.3/jquery.csv.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', async()=>{
  const url='sample.csv';
  const data=await fetch(url).then(res=>res.text());
  var csv=$.csv.toArrays(data);
  [...new Set(csv.map(x=>x[0]))].forEach(x=>{
    ken.appendChild(Object.assign(document.createElement('option'),{value:x,textContent:x}));
  });
  ken.addEventListener('change',e=>{
    const v=e.target.value;
    document.querySelectorAll('#shityouson option').forEach((x,y)=>{
      if(y>0) x.remove();
    });
    csv.filter(x=>x[0]==v).map(x=>x[1]).forEach((x,y)=>{
      shityouson.appendChild(Object.assign(document.createElement('option'),{value:x,textContent:x,"data-idx":y}));
    });
    ichiran.textContent="";
  });
  shityouson.addEventListener('change',e=>{
    const v=csv.filter(x=>x[0]==ken.value && x[1]==shityouson.value);
    ichiran.textContent=v;
  });

});
//    var ken=[...new Set(data.map(x=>x[0]))];
</script>

<select id="ken">
<option value="">---</option>
</select>
<select id="shityouson">
<option value="">---</option>
</select>
<div id="ichiran"></div>

Comments

[happy_girl]

ありがとうございます！
説明不足で、すいません。
目指したい挙動を追記したので、ご確認いただけますと幸いです！

[yambejp]

csvはケアする処理が多いのでデータという意味ではjsonの方が取り扱いしやすいと思います

[happy_girl]

ありがとうございます！！！
そうなのですね、json、勉強いたします、、！！

1点確認なのですが、
出力がカンマ区切りを現状の仕組みのように
jQueryの

$(".ichiran").append('<li data-shityouson="' +
this[1] + '"><h2>ダミーテキスト</h2><table><tr><th>ダミーテキスト</th><td>' +
this[2] + '</td></tr><tr><th>ダミーテキスト</th><td>' +
this[3] + '</td></tr></table><br><h2>ダミーテキスト</h2><table><tr><th>ダミーテキスト</th><td>' +
this[5] + '</td></tr><tr><th>ダミーテキスト</th><td>' +
this[6] + '</td></tr></table><br><h2>ダミーテキスト</h2><table><tr><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th><th>日</th></tr><tr><td>' +
this[7] + '</td><td>' +
this[8] + '</td><td>' +
this[9] + '</td><td>' +
this[10] + '</td><td>' +
this[11] + '</td><td>' +
this[12] + '</td><td>' +
this[13] + '</td></tr></table><br><h2>ダミーテキスト</h2><p>' +
this[4] + '</p><br><h2>ダミーテキスト</h2><p>' +
this[4] + '</p></li>');
のようにそれぞれ格納はまた別の処理が必要なのでしょうか？