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

问题

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");
   }
   }
 }

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

回答1:

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/

回答2:

Use output.value instead of output in assigning statement. like this

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

Also if you are expecting to show multiple list then you have to concatenate the results .like this

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");
       }
  }

Assign id value "response" to your textarea tag since you are using getElementById.

And its better to have window.onload function for intialising all your functions

来源：https://stackoverflow.com/questions/16247626/how-to-let-the-user-input-text-to-search-array-object-then-output-if-there-is-a

标签

javascript

html

event-handling