Javascript 过滤用户输入以将JSON数据显示到XMLHttpRequest中的表中？

我是JS的初学者，不幸的是，我被困在如何显示将由用户输入内容过滤的信息上。现在我有一个表，它将显示JSON信息，但我希望像“Trump”这样的字母或全名进行过滤，然后它将显示一个结果表。我如何将过滤后的结果与我的代码组合成一个表

HTML

<form>
    <label for="name">Name:</label> 
    <input id='input' placeholder="President Name" type="text"> 
    <button onclick="loadPresidents()" type="button">Search for Presidents</button> <button type="button">Clear</button>
    <div id="presidentialTable"></div>
</form>

姓名：
搜寻总统

JS

function loadPresidents() {
"use strict";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        var data = this.responseText,
            jsonResponse = JSON.parse(data),
            table = document.createElement('table');

        table.setAttribute('class', 'history');
        var properties = ['number', 'name', 'date', 'took_office', 'left_office'];
        var capitalize = function (s) {
            return s.charAt(0).toUpperCase() + s.slice(1);
        };

        function filterResults() {
            var input = document.getElementById('input').value;
            var resultsFiltered = jsonResponse.filter(function(historicalData) {
                return historicalData.indexOf(input) != -1;
            });
            var result = ''; 

            resultsFiltered.map(function(a) {
                result += a + '<br/>';
            });
        }


        var tr = document.createElement('tr');
            for (var i = 0; i < properties.length; i++) {
                var th = document.createElement('th');
                th.appendChild(document.createTextNode(capitalize(properties[i])));
                tr.appendChild(th);
            }

            table.appendChild(tr);

            var tr, row;
            for (var r = 0; r < jsonResponse["presidents"].president.length; r++) { 
                tr = document.createElement('tr');
                row = jsonResponse["presidents"].president[r];
                for (var i = 0; i < properties.length; i++) {
                    var td = document.createElement('td');
                    td.appendChild(document.createTextNode(row[properties[i]]));
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }

            document.getElementById('presidentialTable').appendChild(table);
        }
    };
    xhttp.open("GET", "//Resources/USPresidents.json", true);
    xhttp.send();
}

函数loadPresidents（）{
“严格使用”；
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
var data=this.responseText，
jsonResponse=JSON.parse（数据），
table=document.createElement（'table'）；
table.setAttribute（'class'，'history'）；
var属性=['number'、'name'、'date'、'take_office'、'left_office']；
var资本化=功能{
返回s.charAt（0.toUpperCase（）+s.slice（1）；
};
函数filterResults（）{
var input=document.getElementById（'input'）。值；
var resultsfiled=jsonResponse.filter（函数（historicalData）{
返回历史数据。indexOf（输入）！=-1；
});
var结果=“”；
resultsFiltered.map（函数（a）{
结果+=a+'
'；
});
}
var tr=document.createElement（'tr'）；
对于（var i=0；i

将代码重写如下-

函数loadPresidents（）{
“严格使用”；
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
var data=this.responseText，
jsonResponse=JSON.parse（数据），
table=document.createElement（'table'）；
table.setAttribute（'class'，'history'）；
var属性=['number'、'name'、'date'、'take_office'、'left_office']；
var资本化=功能{
返回s.charAt（0.toUpperCase（）+s.slice（1）；
};
函数过滤器结果（数据）{
var input=document.getElementById（'input'）。值；
返回数据.过滤器（函数（historicalData）{
返回historicalData.name.toLowerCase（）.indexOf（input.toLowerCase（））！=-1；
});
}
var tr=document.createElement（'tr'）；
对于（var i=0；i

如果你从未调用过过滤结果函数，它有什么用呢？啊！我忘记了调用函数，仍然在学习它们。

function loadPresidents() {
    "use strict";
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var data = this.responseText,
                jsonResponse = JSON.parse(data),
                table = document.createElement('table');

            table.setAttribute('class', 'history');
            var properties = ['number', 'name', 'date', 'took_office', 'left_office'];
            var capitalize = function(s) {
                return s.charAt(0).toUpperCase() + s.slice(1);
            };

            function filterResults(data) {
                var input = document.getElementById('input').value;
                return data.filter(function(historicalData) {
                    return historicalData.name.toLowerCase().indexOf(input.toLowerCase()) != -1;
                });

            }


            var tr = document.createElement('tr');
            for (var i = 0; i < properties.length; i++) {
                var th = document.createElement('th');
                th.appendChild(document.createTextNode(capitalize(properties[i])));
                tr.appendChild(th);
            }

            table.appendChild(tr);

            var tr, row;
            var filtered = filterResults(jsonResponse["presidents"].president);
            for (var r = 0; r < filtered.length; r++) {
                tr = document.createElement('tr');
                row = filtered[r];
                for (var i = 0; i < properties.length; i++) {
                    var td = document.createElement('td');
                    td.appendChild(document.createTextNode(row[properties[i]]));
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }

            document.getElementById('presidentialTable').appendChild(table);
        }
    };
    xhttp.open("GET", "//schwartzcomputer.com/ICT4570/Resources/USPresidents.json", true);
    xhttp.send();
}