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

用户输入程序代码，例如＆＃34; G0101＆＃34;并提供所有相关信息。我希望搜索更像是实时类型搜索。因此，目前用户只会看到搜索框。当用户键入一次匹配时，会出现带有结果的格式化表格。如果他们开始按退格键搜索不同的代码，表格会消失，直到找到新的匹配项。所有这一切都与预期完全一致。但是我的问题是我的所有测试都是使用只包含大约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在评论中说，考虑做少搜索操作：

break

2 - 一旦找到结果，请考虑使用 for(/* some loop logic*/) { // some operations if (match) { // some operation when result found // ... break; } } ：

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

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

json的例子（如果程序代码是唯一的）：

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; } }循环：

if (entry.Contains(search_text)) { future_json.Add(entry) }

4 - 避免每次都下载json

下载一次并在需要时进行搜索
仅下载一组相关的部分匹配（服务器端：import java.util.Random; import java.util.Scanner; public class Test5555 { private static int[] randomInteger; public static void main(String[] args) { randomInteger = new int[100]; Random rand = new Random(); int indexPosition; for (int i = 0; i < randomInteger.length; i++) randomInteger[i] = rand.nextInt(); Scanner input = new Scanner(System.in); System.out.println("Please enter an integer for the array index position: "); while(true) { String strIndex = input.next(); if(strIndex.equals("quit")) break; indexPosition = getIntVal(strIndex); if(indexPosition < 0 || indexPosition >= randomInteger.length) { System.out.print("Please enter a valid integer between 0 and " + randomInteger.length + " or type quit to exit: "); continue; } System.out.println(randomInteger[indexPosition]); break; } input.close(); } protected static int getIntVal(String inputStr) { int result = -1; try { result = Integer.parseInt(inputStr); } catch(NumberFormatException e) {} return result; } }）

5 - 考虑使用一些现有插件：

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

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

希望这有帮助！

加速Jquery / Json搜索

1 个答案: