如何最好地显示来自大型json对象的匹配

我正在将数据从json对象加载到页面上的表中。然后，我允许用户通过输入过滤数据，并只显示匹配项。我这样做的方法肯定不太好，但确实有效。

现在，我想对机场及其代码列表做同样的事情。问题是，机场列表要长得多，当加载带有数据的表以及在表中搜索用户输入时，页面会显著下降。

这是有效页面的信息，这样你就可以知道我在做什么。

当我有更大的数据集要搜索时，我可以做什么不同的事情来获得与这里相同的效果

页面显示数据：（例如键入"美国航空公司"或"aa"）https://pnrbuilder.com/_popups/dataDecoder.php

json对象，包含航空公司信息：https://pnrbuilder.com/_java/airlineDecoder.js

将数据加载到页面并根据用户输入进行筛选的Srpt：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";
            }
        }
    }
}