如何让用户输入文本来搜索数组对象，然后输出是否有匹配？纯粹的Javascript [英] How to let the user input text to search array object, then output if there is a match? Pure Javascript please

问题描述

我是新的javascript，所以请光着我。这个网站上的每个人都是如此惊人的我们的新手，所以谢谢你提前。所以这里是我在哪里...我正在建立一个真正通用的音乐应用程序（sorta ）。它不会用于任何真正的风景，它只是学习和理解js。所以我被困在几个地方。我有一个我的数组对象的构造函数，我将相册推入数组，然后将它们显示在一个可以按不同方式组织按钮的表格中。现在我试图拥有一个搜索框，用户将输入文本，将其与数组进行比较，然后当输出文本区域中显示匹配（或者最好的方式）时，我似乎无法使其工作，任何帮助将不胜感激。另外，我应该有一个window.onload事件，并把所有的函数init？

I am new to javascript, so please bare with me.Everyone on this site is so amazing to us newbies so thank you in advance.So here is where I am... I am building a really generic music app(sorta). It wont be used in any real scenerio, it is simply to learn and understand js. So I am stuck in a couple places. I have a constructor for my array object, i push albums into the array then display them into a table that can be organized in different ways onclick of buttons. Now I am trying to have a search box that will take users input text, compare it to the array, then when there is a match displays in the output textarea(or whatever is best) I cant seem to get it to work, any help would be greatly appreciated. Also, should I have a window.onload event and put all my functions init?

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

To see everything I have together: here is my fiddle

这里是我似乎没有的代码要上班：

And here is the code i cant seem to get to work:

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

推荐答案

相当多的问题，应该是艺术家不是艺术家， output.value not 输出，在html中应为 id 不名称为 textarea ，您需要 trim 用户输入的空格，我从循环内部删除了警报（非常讨厌）。我确定有一些其他的东西，但现在忘记了。我仍然看到一些可以改进的领域，但我没有做任何事情。这是我的更新。 （很有趣，很多代码看起来很熟悉）。哦，对于使用 innerHTML ，如果你真的意味着 textContent ，当从输入元素使用值

Quite a few problems, it should be artists not artist, output.value not output, in html should be id not name for textarea, you need to trim the user input of whitespace, I removed the alert from inside the loop (very annoying). I'm sure there was some other things but forgotten now. I still see a number of areas where this can be improved but I have not done anything about them. Here is my update. (it's funny, much of the code seems familiar somehow). Oh yes, be carefull when using innerHTML if you actually meant textContent, and when getting user input from an input element use value

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

这篇关于如何让用户输入文本来搜索数组对象，然后输出是否有匹配？纯粹的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！