javascript - 从多个 JSON 文件、Javascript、AJAX 进行实时搜索

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来执行多个异步promise````

$.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/