Question

我有一个巨大的JSON文件，我一直用它来搜索JavaScript和AJAX。我正在使用实时搜索，以便在每次按键后，JavaScript搜索整个JSON文档并返回与搜索字段中的搜索结果匹配的结果。

问题是，每次按下一个键时，服务器都会请求整个JSON文件，这会导致数据使用量真正快速增加。

有没有办法将整个JSON文件下载到本地计算机上，然后对其进行预搜索？

我一直在使用JQuery的$.getJSON()作为解释JSON文件的方法。

我想要一个最小化必须尽可能多地更改现有代码的解决方案。

我认为将JSON复制到HTML文件中可能效果最好，因为一旦加载页面就会全部下载，我可以在HTML中搜索它。虽然我不确定如何解决这个问题。

这是我的JSON数据的样子:(除了这些数据中有近500个）

{"profiles": [
{
  "first_name": "Robert",
  "last_name": "Hosking",
  "img_url": "img/about/profile.jpg",
  "major": "Computer Science",
  "cohort": 12,
  "bio": "eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi",
  "linkedin": "http://linkedin.com",
  "home_town": "Rutherfordton, NC",
  "status": "Student"
}]

以下是我的搜索功能:(我的HTML中有id="search"的输入字段

    $('#search').keyup(function() {
    var searchField = $('#search').val();
    var myExp = new RegExp(searchField, "i");
    $.getJSON('/profiles.json', function(data){
        var result =""
        $.each(data.profiles, function(key, val){

            var fullName = val.first_name + " " + val.last_name
            var cohortNum = val.cohort.toString()
            var cohortName = "cohort " + cohortNum
            if ((val.first_name.search(myExp) != -1) || 
                (val.last_name.search(myExp) != -1) ||
                (val.major.search(myExp) != -1) ||
                (fullName.search(myExp) != -1)||
                (cohortNum.search(myExp) != -1)||
                (cohortName.search(myExp) != -1)
                ){
                    var template = $('#profile-preview-template').html();
                    result += Mustache.render(template, val);       
            }
        });
        $('#profile-results').html(result);
    });
});

该位Mustache.render(template, val)只是将JSON数据从名为mustache.js的库中提供给JavaScript模板。

提前致谢！

Answer 1

使用getJSON为Promise

的事实

var someGlobalData = $.getJSON('/profiles.json'); // add this somewhere global

$('#search').keyup(function() {
    var searchField = $('#search').val();
    var myExp = new RegExp(searchField, "i");
    someGlobalData.then(function(data) { // change this one line
        var result = ""
        $.each(data.profiles, function(key, val) {

            var fullName = val.first_name + " " + val.last_name
            var cohortNum = val.cohort.toString()
            var cohortName = "cohort " + cohortNum
            if ((val.first_name.search(myExp) != -1) ||
                (val.last_name.search(myExp) != -1) ||
                (val.major.search(myExp) != -1) ||
                (fullName.search(myExp) != -1) ||
                (cohortNum.search(myExp) != -1) ||
                (cohortName.search(myExp) != -1)
            ) {
                var template = $('#profile-preview-template').html();
                result += Mustache.render(template, val);
            }
        });
        $('#profile-results').html(result);
    });
});

在没有AJAX的情况下搜索JSON数据

1 个答案: