搜索输入并获取与输入Javascript相关的输出

我试图制作一个输入框，要求输入学生姓名，当有人键入某个姓名时，html将打印到屏幕上，显示该学生的统计信息。我在这方面有困难，特别是因为控制台没有说有任何错误

这是我的代码，到目前为止，它完全不起任何作用

另外，我不希望出现任何提示、警报或类似的情况，我希望它完全出现在页面上

基本上，我希望它成为一个学生姓名的搜索框，然后输出他们的统计数据。因此，当您单击按钮，并且您输入的学生姓名与代码中的姓名匹配时，html将显示该学生的统计信息

________________

---

|学生u NAME 124;我对你的代码做了一些修改。请检查这个

总而言之，我看到的问题很少。您的函数

getStudentReport

需要一个

student

对象，但在单击按钮调用它时，您不会将其传递到任何地方。我修改了这一行如下

getStudentReport(getStudent())

其中

getStudent

是一个新函数，如下所示

function getStudent() {
    var student = document.getElementById('first_name').value;
    if (student != null) {
        for (var i = 0; i < students.length; i++) {
            if (students[i].name.toLowerCase() === student.toLowerCase()) {
                return students[i];
            }
        }
    }

    return null;
}

---

总的来说，最终的HTML并不是实现您想要实现的目标的最佳方式，但我将重构留给您

您可以尝试以下方法。在输入更改时，您将输出与输入字符串匹配的名称列表，然后单击其中一个以显示您的报告。这是一种更好的模式，因为您可以在重复项之间进行选择

window.addEventListener('load', function() {
    var matches = document.getElementById('matches');
    var input = document.getElementById('first_name');
    var result = document.getElementById('result');

    matches.addEventListener('click', function(event){
        var studentID = event.target.dataset.studentid;
        var record = students[studentID];
        result.innerHTML = `<div>Name: ${record.name}</br> Track: ${record.track} Achievements: ${record.achievements} Points: ${record.points}</div>`
    })

input.addEventListener('input', function(event){
    matches.innerHTML = '';
    var matchArr = [];
    var inputString = event.target.value;
    for(var i in students){
        var student = students[i];
        if(student.name.substring(0, inputString.length).toLowerCase() == inputString.toLowerCase() && inputString.length > 0){
        matchArr.push(i);
            }
        }
        displayStudents(matchArr);
    });
})

function displayStudents(matchArr){
   for(var i in matchArr){
       var studentID = matchArr[i];
       var e = document.createElement('div');
       e.dataset.studentid = studentID;
       e.innerHTML = students[studentID].name;
       matches.appendChild(e);
   }
}

First name: <input id="first_name" type="text" name="first_name">
<div id="matches"></div>
<hr>
<div id="result"></div>

window.addEventListener（'load'，function（）{
var matches=document.getElementById（'matches'）；
var input=document.getElementById（'first_name'）；
var result=document.getElementById（'result'）；
matches.addEventListener（'click'，函数（事件）{
var studentID=event.target.dataset.studentID；
var记录=学生[studentID]；
result.innerHTML=`Name:${record.Name}
Track:${record.Track}成就：${record.sagements}点数：${record.Points}`
})
addEventListener（'input'，函数（事件）{
matches.innerHTML=''；
var matchArr=[]；
var inputString=event.target.value；
for（学生中的变量i）{
var student=学生[i]；
if（student.name.substring（0，inputString.length）.toLowerCase（）==inputString.toLowerCase（）&&inputString.length>0）{
匹配推力（i）；
}
}
显示学生（matchArr）；
});
})
函数显示学生（matchArr）{
用于（matchArr中的变量i）{
var studentID=matchArr[i]；
var e=document.createElement（'div'）；
e、 dataset.studentid=studentid；
e、 innerHTML=学生[studentID]。姓名；
匹配项。追加子项（e）；
}
}
名字：

---

仍然不适用于我，假设我只需要在线复制一些代码并修改它……您是否尝试了我提供的JSFIDLE链接？您可以键入Joshua或Becky或任何其他名称，结果将打印在输入框的正下方。如何添加enter按钮，以便用户可以选择按enter键？我试图将它添加到我的代码中，但我不确定确切的添加位置。有两个选项，您可以在按钮上处理

按键

事件并检查enter键代码，或者您可以将

输入

和

按钮

包装在表单中。按enter键时，它将触发FORM上的

submit

事件。我已更新JSFIDLE以处理enter键

onclick="document.getElementById('result').innerHTML = getStudentReport(getStudent())"

window.addEventListener('load', function() {
    var matches = document.getElementById('matches');
    var input = document.getElementById('first_name');
    var result = document.getElementById('result');

    matches.addEventListener('click', function(event){
        var studentID = event.target.dataset.studentid;
        var record = students[studentID];
        result.innerHTML = `<div>Name: ${record.name}</br> Track: ${record.track} Achievements: ${record.achievements} Points: ${record.points}</div>`
    })

input.addEventListener('input', function(event){
    matches.innerHTML = '';
    var matchArr = [];
    var inputString = event.target.value;
    for(var i in students){
        var student = students[i];
        if(student.name.substring(0, inputString.length).toLowerCase() == inputString.toLowerCase() && inputString.length > 0){
        matchArr.push(i);
            }
        }
        displayStudents(matchArr);
    });
})

function displayStudents(matchArr){
   for(var i in matchArr){
       var studentID = matchArr[i];
       var e = document.createElement('div');
       e.dataset.studentid = studentID;
       e.innerHTML = students[studentID].name;
       matches.appendChild(e);
   }
}

First name: <input id="first_name" type="text" name="first_name">
<div id="matches"></div>
<hr>
<div id="result"></div>