如何让用户输入文本来搜索数组对象，然后输出是否有匹配?请使用纯Javascript

Question

我是javascript新手，所以请原谅我。这个网站上的每个人对我们新手来说都是如此的神奇，所以提前谢谢你。所以我在这里…我正在建立一个真正通用的音乐应用程序(有点)。它不会在任何实际场景中使用，它只是用来学习和理解js。所以我被困在几个地方。我有一个数组对象的构造函数，我将专辑推入数组，然后将它们显示到一个表中，该表可以通过单击按钮以不同的方式组织。现在我试图有一个搜索框，将用户输入文本，将其与数组进行比较，然后当有一个匹配显示在输出文本区(或任何最好的)我似乎不能让它工作，任何帮助将不胜感激。还有，我应该有一个窗户吗?Onload事件，并把我所有的函数init?

看到我在一起的一切这是我的小提琴

这里是代码，我似乎不能得到工作:

    //function to display artist info inner HTML if in array
    function displaySearchResult() {
    albums.sort(compareSearch);
    var output= document.getElementById("response");
    var formInput = document.getElementById("formInput").innerHTML;
      for (var i=0; i<album.length; i++){
           if (album[i].artist == formInput) {
       output = formInput + " , " + album[i].title + " " + album[i].artist;
   } else {
      alert("not found");
   }
   }
 }

HTML:

    <input type="text" id="formInput" value="Search for an Artist"> </input> <br>
    <button id="search" >Submit</button>
    <p><textarea name="response" rows="0" cols="45" wrap></textarea></p>

Answer 1

相当多的问题，它应该是artists而不是artist, output.value而不是output，在html中应该是id而不是name为textarea，你需要trim的用户输入的空白，我从循环内删除了警报(非常烦人)。我肯定还有其他一些事情，但现在已经忘记了。我仍然看到一些可以改进的地方，但我还没有采取任何措施。以下是我的最新消息。(有趣的是，很多代码似乎都很熟悉)。哦，是的，如果您实际上指的是textContent，那么在使用innerHTML时要小心，当从input元素获取用户输入时，请使用value

http://jsfiddle.net/Xotic750/SSVSW/

Answer 2

在赋值语句中使用output.value代替output。这样的

output.value = formInput + " , " + album[i].title + " " + album[i].artist;

如果你希望显示多个列表，那么你必须像这样将结果连接起来

var output= document.getElementById("response");
var formInput = document.getElementById("formInput").innerHTML;
output.value = "";
  for (var i=0; i<album.length; i++){
       if (album[i].artist == formInput) {
           output.value += formInput + " , " + album[i].title + " " + album[i].artist;
       } else {
           alert("not found");
       }
  }

给你的textarea标签分配id值"response"，因为你正在使用getElementById。

最好使用window.onload函数来初始化所有函数