【发布时间】：2013-07-13 08:44:33
【问题描述】：
我正在将 json 对象中的数据加载到我页面上的表格中。然后我允许用户通过输入过滤该数据并仅显示匹配项。我这样做的方法肯定不是很好，但确实有效。
现在我想对机场列表及其代码执行完全相同的操作。问题是机场列表要长得多，并且在加载数据表以及在表中搜索用户输入时页面会严重卡顿。
以下是有效页面的信息，以便您了解我在做什么。
当我要搜索更大的数据集时，我可以采取哪些不同的措施来获得与此处相同的效果？
页面显示数据：（输入“美国航空公司”或“aa”为例） https://pnrbuilder.com/_popups/dataDecoder.php
包含航空公司信息的json对象： https://pnrbuilder.com/_java/airlineDecoder.js
将数据加载到页面并根据用户输入对其进行过滤的脚本： 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";
}
}
}
}
【问题讨论】：
-
您不能对照 JSON 数据检查输入吗？并为每个对象添加一个属性，例如 isVisible: true/false。全部设置好后，循环遍历 JSON 数组并： if (!isVisible) {...hide table row}
-
我相信我可以。那会更快吗？在输入的每个 keyup 事件上都会调用“过滤器函数”。循环遍历分配/删除 isVisible 的 JSON 对象然后再次循环遍历 JSON 数组以将可见槽加载到表中会比我现在做的要少得多吗？不拒绝，只是想了解。
标签： javascript json search