javascript - 大きな json オブジェクトからの一致を最適に表示するにはどうすればよいですか?

Question

json オブジェクトからページのテーブルにデータをロードしています。次に、ユーザーが入力を介してそのデータをフィルタリングし、一致するものだけを表示できるようにします。これを行う私の方法は確かに素晴らしいものではありませんが、うまくいきます。

ここで、空港とそのコードのリストを使用して、まったく同じことを行いたいと考えています。問題は、空港のリストがはるかに長くなり、テーブルにデータをロードするとき、およびテーブルでユーザーの入力を検索するときに、ページが大幅に停止することです。

私が何をしているかを見ることができるように、機能するページの情報は次のとおりです。

検索するデータセットがはるかに大きい場合、ここで得たのと同じ効果を得るにはどうすればよいでしょうか?

データを表示するページ: (例として「アメリカン航空」または「aa」と入力) https://pnrbuilder.com/_popups/dataDecoder.php

航空会社情報を含む json オブジェクト: https://pnrbuilder.com/_java/airlineDecoder.js

データをページにロードし、ユーザー入力に基づいてフィルタリングするSript: https://pnrbuilder.com/_java/decodeData.js

---

私のコードの最も重要な部分は次のとおりです。

// This function is called by a for loop on dom ready
// It basically prints data stored in a json object to a table on the page 



function fillInfo(line) {

    var table = document.getElementById('decodeTable');

    var row = document.createElement('tr');
    table.appendChild(row);

    var col1 = document.createElement('td');
    row.appendChild(col1);
    var curCode = document.createTextNode(arlnInfo.d[line].IATA);
    col1.appendChild(curCode);

    var col2 = document.createElement('td');
    row.appendChild(col2);
    var curArln = document.createTextNode(arlnInfo.d[line].Airline);
    col2.appendChild(curArln);

    var col3 = document.createElement('td');
    row.appendChild(col3);
    var curPre = document.createTextNode(arlnInfo.d[line].Prefix);
    col3.appendChild(curPre);

    var col4 = document.createElement('td');
    row.appendChild(col4);
    var curIcao = document.createTextNode(arlnInfo.d[line].ICAO);
    col4.appendChild(curIcao);

    var col5 = document.createElement('td');
    row.appendChild(col5);
    var curCnty = document.createTextNode(arlnInfo.d[line].Country);
    col5.appendChild(curCnty);


}


// This function checks user input against data in the table 
// If a match is found whitin a row, the row containing the match is shown
// If a match is not found that row is hidden 



function filterTable(input) {

    var decodeTable = document.getElementById('decodeTable');
    var inputLength = input.length;


// THis first part makes sure that all rows of the generated table are hidden when no input is present 

    if (inputLength == 0) {            

        for (var r = 1; r < decodeTable.rows.length; r++) {

            decodeTable.rows[r].style.display = "none";

        }

    } 


// This part checks just the airline codes "column" of the table when input is only one or two characters


    else if (inputLength < 3) {

        for (var r = 1; r < decodeTable.rows.length; r++) {

            var celVal = $(decodeTable.rows[r].cells[0])
                .text()
                .slice(0, inputLength)
                .toLowerCase();
            if (celVal == input) {
                decodeTable.rows[r].style.display = "";
            } else {
                decodeTable.rows[r].style.display = "none";
            }

        }
    }

// This part checks several "columns" of the table when input is more than two characters

    else if (inputLength > 2) {

        for (var r = 1; r < decodeTable.rows.length; r++) {

            var celVal = $(decodeTable.rows[r].cells[2])
                .text()
                .slice(0, inputLength)
                .toLowerCase();
            var celVal2 = $(decodeTable.rows[r].cells[1])
                .text();
            if (celVal == input || celVal2 == input) {
                decodeTable.rows[r].style.display = "";
            } else if (celVal2.replace(/<[^>]+>/g, "")
                .toLowerCase()
                .indexOf(input) >= 0) {
                decodeTable.rows[r].style.display = "";
            } else {
                decodeTable.rows[r].style.display = "none";
            }

        }
    }

}