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

How to let the user input text to search array object, then output if there is a match? Pure Javascript please

本文关键字:是否 输出 然后 Javascript 请使用 对象 数组 输入 用户 文本来 搜索      更新时间:2023-09-26

我是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>

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

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

在赋值语句中使用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函数来初始化所有函数