Question

我必须使用AJAX和jQuery实现一个搜索栏，显示来自3个JSON文件的结果。目前我已与它合作，但我不确定如何将其改编为同时实时搜索3个单独的JSON文件。

const search = document.querySelector('#search');
search.addEventListener('keydown', liveSearch);

function liveSearch() {
    const searchField = search.value;
    const myExp = new RegExp(searchField, "i");

    $.getJSON('weekday.json', function(data) {
        var output = '<ul>';
        $.each(data, function(key, val) {
            if ((val.Title.search(myExp) !== -1) || (val.Description.search(myExp) !== -1)) {
                output += '<li>';
                output += '<strong>' + val.Title + '</strong>';
                output += '<p>' + val.Description + ' - ' + val.Price + '</p>';
                output += '</li>';
            }
        });
        output += '</ul>';
        $('#output').html(output);
    });
}

任何帮助将不胜感激。

Answer 1

您可以使用$.when执行多个异步承诺 ```

$.when(
   $.getJSON('weekday1.json'),
   $.getJSON('weekday2.json'),
   $.getJSON('weekday3.json')
).then(function (results) {
   var r1 = results[0]; // result in weekday1.json
   var r2 = results[1]; // result in weekday2.json
   var r3 = results[2]; // result in weekday3.json
})

注意：只有在解析完所有异步任务后才能解析promise（.then函数）。

参考：https://api.jquery.com/jquery.when/

Answer 2

由arfai1213提供的代码中的

'results'不会返回可按建议使用的数组。

按照下面的代码拆分结果将返回可以使用的单独数组。

$.when(
    $.getJSON('./data/file1.json'),
    $.getJSON('./data/file2.json')
).then(function (r1, r2) {
    $.each(r1[0], function(key, val){
        //do something
    })
    $.each(r2[0], function(key, val){
        //do something
    })
});

从多个JSON文件，Javascript，AJAX实时搜索

2 个答案: