javascript - 无需 AJAX 即可搜索 JSON 数据

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);
    });
});