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";
            }

        }
    }

}

Answer 1

你可以应用的第一个小优化是不要在每个键上完成整个过滤器，等到用户完成输入后再延迟调用它半秒：

var timeOut = 0;
$("#deCode").keyup(function () {
    // cancel looking, the user typed another character
    clearTimeout(timeOut);
    // set a timeout, when user doesn't type another key
    // within half a second the filter will run
    var input = $("#deCode").val().toLowerCase().trim();
    timeOut=setTimeout(function(){
        filterTable(input)
    },500);
});

接下来是比较你的json数据而不是jquery对象，并在创建表后将你的JSON数据转换为小写，这样你就不必每次都检查toLowerCase每行：

function filterTable(input) {
    var decodeTable = document.getElementById('decodeTable');
    var inputLength = input.length;
    if (inputLength ==0) {
        for (var r = 1; r < decodeTable.rows.length; r++) {
            decodeTable.rows[r].style.display = "none";
        }
    }
    else if (inputLength <3) {
        for (var r = 0; r < arlnInfo.d.length; r++) {
            if (arlnInfo.d[r].IATA.indexOf(input)===0) {
                decodeTable.rows[r+1].style.display = "";
            }
            else {
                decodeTable.rows[r+1].style.display = "none"; 
            }

        }
    }
    else if (inputLength > 2) {
        for (var r = 0; r < arlnInfo.d.length; r++) {
            if (arlnInfo.d[r].Prefix.indexOf(input)===0) {
                decodeTable.rows[r].style.display = "";
            }
            else if (arlnInfo.d[r].Airline.indexOf(input) >= 0) {
                decodeTable.rows[r + 1].style.display = "";
            }
            else {
                decodeTable.rows[r + 1].style.display = "none";
            }

        }
    }
}

问题在于您的JSON数据："Prefix": 430导致arlnInfo.d[r].Prefix.slice(0, inputLength)抛出错误，因为数据不是字符串而是数字。如果你可以控制JSON，那么你应该将这些值转换为字符串（"Prefix":"430"），如果你没有，那么转换一次并使用JSON.stringify(arlnInfo);重新创建airlineDecoder.js

要转换您的JSON，您可以将其复制并粘贴到Chrome控制台（按F12）并运行它（按回车键）。它将记录转换后的JSON，但您可能需要像netbeans这样的IDE来重新格式化它：

var i = 0;
for(i=0;i<arlnInfo.d.length;i++){
  arlnInfo.d[i].Prefix=arlnInfo.d[i].Prefix+"";
}
console.log("var arlnInfo = " + JSON.stringify(arlnInfo));

您可以应用的最后一个优化是使用DocumentFragment而不是直接将每行添加到DOM，在这里我们将JSON数据转换为小写，因此我们不必为每次搜索都这样做：

var decodeTable = document.getElementById('decodeTable');
function createTable() {
    var df = document.createDocumentFragment();
    for (var i = 0; i < arlnInfo.d.length; i++) {
        fillInfo(i, df);
        arlnInfo.d[i].IATA = arlnInfo.d[i].IATA.toLowerCase()
        arlnInfo.d[i].Prefix = arlnInfo.d[i].Prefix.toLowerCase();
        arlnInfo.d[i].Airline = arlnInfo.d[i].Airline.toLowerCase();
    }
    decodeTable.appendChild(df);
}
createTable();
....
function fillInfo(line,df) {
    var row = document.createElement('tr');
        df.appendChild(row);
     ....
     row.style.display = "none";
}

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

1 个答案: