Javascript 加速Jquery/Json搜索

这是我第一次使用javascript/jquery，我真的需要一步一步地完成这项工作，但我最终让它完全按照我所希望的那样工作。我有一个JSON文件，看起来像这样

[
  {
    "Procedure Code":"G0101",
    "Par Fee":"$39.78 ",
    "Nonpar Fee":"$37.79 ",
    "Limiting Charge":"$43.46 "
  },
  {
    "Procedure Code":"G0101",
    "Par Fee":"$28.86 ",
    "Nonpar Fee":"$27.42 ",
    "Limiting Charge":"$31.53 "
  },
  {
    "Procedure Code":"G0102",
    "Par Fee":"$20.39 ",
    "Nonpar Fee":"$19.37 ",
    "Limiting Charge":"$22.28 "
  },
  {
    "Procedure Code":"G0102",
    "Par Fee":"$9.10 ",
    "Nonpar Fee":"$8.65 ",
    "Limiting Charge":"$9.95 "
  },
  {
    "Procedure Code":"G0104",
    "Par Fee":"$176.69 ",
    "Nonpar Fee":"$167.86 ",
    "Limiting Charge":"$193.04 "
  },

用户输入程序代码，如“G0101”，并显示所有相关信息。我希望搜索更像是一个活生生的搜索。因此，当前用户只会看到一个搜索框。一旦找到匹配项，当用户键入时，将显示一个带格式的表和结果。如果他们开始点击backspace来搜索不同的代码，那么表将消失，直到找到新的匹配项。所有这些都完全按照预期进行。然而，我的问题是，我所有的测试都是用一个只包含10个不同代码的JSON文件完成的。现在我已经完成了，我将它切换到完整文件，我不知道条目的确切数量，但它有65000行长。现在搜索速度非常慢，基本上已经不可用了。就像我说的，这是我第一次使用Jquery，我不知道这是否就是我处理事情的方式，是否有一种熟练的方法，或者这只是需要循环处理大量数据。我已经读到，也许我应该使用for循环，而不是。每个女巫都将有助于提高性能。我希望有人能看穿这一点，并给出一些建议，如果有更好的方法做这件事。谢谢你的建议

$(document).ready(function(){


    $('#searchCode').keyup(function(){

        var usersCode = $('#searchCode').val();
        var usersCodeUpper = usersCode.toUpperCase();
        console.log(usersCodeUpper);
        console.log("test");

            $.ajax({

                url: 'http://westcotesting.dev/wp-content/themes/westcotest/data.json',
                datatype: 'json',
                type: 'get',
                cache: 'true',
                success: function(IDCresults){
                    $(IDCresults).each(function(index,value){

                        var pCode               = (value['Procedure Code'])
                        var parFee              = (value['Par Fee'])
                        var nonParFee           = (value['Nonpar Fee'])
                        var limitingCharge      = (value['Limiting Charge'])


                        if (usersCodeUpper == pCode) {

                            var pCodeH4             = "<h4>" + pCode + "</h4>"
                            var parFeeH4            = "<h4>" + parFee + "</h4>"
                            var nonParFeeH4         = "<h4>" + nonParFee + "</h4>"
                            var limitingChargeH4    = "<h4>" + limitingCharge + "</h4>"

                            $("div#code_results_wrapper").removeClass("no-js")
                            $("#codeResults").html(pCodeH4)
                            $("#parFeeResults").append(parFeeH4)
                            $("#nonParFeeResults").append(nonParFeeH4)
                            $("#limitingChargeResults").append(limitingChargeH4)

                    }
                        $('#searchCode').keyup(function(){

                            $("div#code_results_wrapper").addClass("no-js")
                            $("#parFeeResults").html(" ")
                            $("#nonParFeeResults").html(" ")
                            $("#limitingChargeResults").html(" ")
                        });                                             
                });
            }
        })
    });
 });

$（文档）.ready（函数（）{
$（'#searchCode'）.keyup（函数（）{
var usersCode=$（'#searchCode'）.val（）；
var usersCodeUpper=usersCode.toUpperCase（）；
log（usersCodeUpper）；
控制台日志（“测试”）；
$.ajax({
网址：'http://westcotesting.dev/wp-content/themes/westcotest/data.json',
数据类型：“json”，
键入：“get”，
缓存：“true”，
成功：功能（IDCresults）{
$（IDCresults）.每个（函数（索引，值）{
变量pCode=（值['Procedure Code']）
var parFee=（价值['Par Fee']）
var nonParFee=（值['nonParFee']）
var limitingCharge=（值['限制费用]）
if（usersCodeUpper==pCode）{
var pCodeH4=“+pCode+”“
var parFeeH4=“”+parFee+“”
var nonParFeeH4=“+非帕菲+”“
var limitingChargeH4=”“+limitingCharge+“”
$（“div#code#u results_wrapper”）.removeClass（“no js”）
$（“#codeResults”）.html（pCodeH4）
$（“#parFeeResults”）.append（parFeeH4）
$（“#nonParFeeResults”）.append（nonParFeeH4）
$（“#limitingChargeResults”）。追加（limitingChargeH4）
}
$（'#searchCode'）.keyup（函数（）{
$（“div#code#u results_wrapper”）.addClass（“no js”）
$（“#parFeeResults”）.html（“”）
$（“#非帕菲结果”）.html（“”）
$（“#limitingChargeResults”）.html（“”）
});                                             
});
}
})
});
});
 1——首先作为jjTube在评论中，考虑做<强>少的搜索操作< /强>：
// nb of milliseconds before search operation
var searchDelay = 500
var searchTimeout;
$('#searchCode').keyup(function(){
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
        // search logic here
    }, searchDelay);
});

 2——一旦找到结果< /强>：
，请考虑使用<强> <代码>破解< /代码>
for(/* some loop logic*/) {
    // some operations
    if (match) {
        // some operation when result found
        // ...
        break;
    }
}

3-您可以更改JSON结构以提高效率：

json示例（如果过程代码是唯一的）：

您可以在对象键上的

循环中为..使用

：

for (var proc_code in json) {
    if (proc_code === search_text) {
        var details = json[proc_code];
        var limiting_charge = details["Limiting Charge"];
        // ...
        break;
    }
}

4-避免每次下载该json


下载一次，并在需要时对其执行搜索
仅下载相关的部分匹配集（服务器端：
if（entry.Contains（search_text））{future_json.Add（entry）}
）

 5考虑使用一些<>强>现有插件<强>：
// nb of milliseconds before search operation
var searchDelay = 500
var searchTimeout;
$('#searchCode').keyup(function(){
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
        // search logic here
    }, searchDelay);
});

jQuery Tokeninput插件允许您在服务器端发送搜索文本（您必须实现搜索过程），下载结果并在下拉列表中显示：


希望这有帮助
在每个键上获取文件，考虑将Ajax移动到外部，只在KEYUP中进行搜索。此外，如果您首先对数组进行排序，则加快搜索速度。@ JTULTE排序太多内容可能太贵。