javascript - 加速 Jquery/Json 搜索

Question

这是我第一次使用 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”，然后会显示所有相关信息。我希望搜索更像是实时类型的搜索。所以目前用户只看到搜索框。当用户键入时，一旦找到匹配项，就会出现一个带有结果的格式化表格。如果他们开始按退格键来搜索不同的代码，那么表格就会消失，直到找到新的匹配项。所有这一切都完全按照预期进行。然而我的问题是我的所有测试都是使用仅包含大约 10 个不同代码的 JSON 文件完成的。现在我已经完成了，我将其切换到完整文件，我不知道确切的条目数，但它有 65,000 行长。现在搜索速度非常慢，以至于基本上不再可用。就像我说的，这是我第一次使用 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(" ")
                        });                                             
                });
            }
        })
    });
 });

Answer 1

1 - 首先，正如 @jcubic 在评论中所说，考虑减少搜索操作:

// nb of milliseconds before search operation
var searchDelay = 500
var searchTimeout;
$('#searchCode').keyup(function(){
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
        // search logic here
    }, searchDelay);
});

2 - 一旦找到结果就考虑使用break:

for(/* some loop logic*/) {
    // some operations
    if (match) {
        // some operation when result found
        // ...
        break;
    }
}

3 - 您可以更改 JSON 结构以获得更高的效率:

json 示例(如果过程代码唯一):

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

您可以在对象键上使用 for..in 循环:

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 - 考虑使用一些现有插件:

jQuery Tokeninput 插件让您发送搜索文本服务器端(您必须实现搜索过程)，下载结果并将其显示在下拉列表中:

http://loopj.com/jquery-tokeninput/

希望这有帮助!