Javascript getJSON JSON数组-搜索功能崩溃客户端

尝试添加搜索功能showList（）时遇到问题

它似乎让客户端陷入了困境，以至于每次我在输入字段中键入内容时，Chrome都想终止页面。我显然是一个新手JS作家，所以我可以在我看不到的地方运行无限循环吗？此外，任何让搜索功能正常工作的建议都将不胜感激。我不认为我在下面的show/hide if语句中使用了正确的选择器，但我想不出还能使用什么

$（文档）.ready（函数（）{
showList（）；
搜索栏（）；
});
函数showList（）{
$（“#显示记录”）。单击（函数（）{
$.getJSON（“data.json”），函数（数据）{
var json=数据；
$（“显示列表”）。附加（“”）
for（var i=0；i
正文{
背景颜色：浅蓝色；
}
tr：第一个孩子{
字体大小：粗体；
}
运输署{
填充：3倍；
/*利润率：10px*/
文本对齐：居中；
}
运输署：第n名儿童（6）{
左侧填充：50px；
}
运输署：第n名儿童（7）{
左侧填充：10px；
右边填充：10px；
}
#过滤计数{
字体大小：12px；
}



搜索：
问题似乎在于，您不能将
附加
视为一个文本编辑器，而您正在编写html

插入的任何内容都必须是正确的元素。。。不是开始标记，然后是一些文本…然后是结束标记

但是，我们可以稍微修改您的代码以生成html字符串，然后在末尾添加该字符串

  $.getJSON("data.json", function(data){
        var json = data;
        var html="<table class='specialists'>")
        for(var i = 0; i < json.length; i++) {
            var obj = json[i],
                tableFormat = "</td><td>";

            html+= "<tr><td class=1>" + 
                obj.FIELD1 + tableFormat + 
                obj.FIELD2 + tableFormat + 
                obj.FIELD3 + tableFormat + 
                obj.FIELD4 + tableFormat + 
                obj.FIELD5 + tableFormat + 
                obj.FIELD6 + tableFormat + 
                obj.FIELD7 + tableFormat + 
                obj.FIELD8 + "</td></tr>";

        }

         html+= '</table>';
        $("#show-list").html(html);
        //end getJSON inner function
    }); 

$.getJSON（“data.json”），函数（数据）{
var json=数据；
var html=“”）
for（var i=0；i
谢谢你的提示。没有意识到我使用不当，append（）。然而，虽然这确实有效，但不幸的是，当我使用searchBar（）函数时，它似乎并没有阻止浏览器崩溃。您返回了多少项作为响应？你是否在每一个按键上都这样做？还注意到源是一个静态json文件，是真实的还是基于发送到服务器的数据返回的数据？我使用的是一个静态json文件，是的。它相当大，大约有11200行JSON。这是否意味着它在每次击键时都会查询所有这些数据？是的，肯定是这样……而且没有对这些数据进行过滤。需要加载一次数据。然后在按键事件上使用
debounce
，这样在用户停止键入之前不会进行搜索。。。可能150到200毫秒…然后在创建html之前过滤数据数组