Javascript在用户搜索时从数组生成内容

Question

I'm having issues dynamically creating content from an array of images. What I want to happen is that when keywords are entered into the searchbar (try "joyride" or "nick"), all of the images that match the keywords show up. Currently, only one image shows up, and it doesn't necessarily match the keyword. I think I'm going wrong with the javascript function - I feel like I shouldn't be using innerHTML to create the photos, especially because when the keyword is deleted, it just leaves the one image.

Would it be easier to do it all in jQuery/javascript, instead of generating the initial gallery of images in jQuery and trying to do the filtering in javascript? I'm lost.

http://scf.usc.edu/~uota/itp301/final/odc-photos.html

This is a working version of the page, with the arrays and other code that I am using.

Thanks in advance!

 $(document).ready(function(){
    for(var i = 0; i < src.length; i++){
    var content = "<div class='pics' id='imagesection" + i + "'>";
    content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
    content += "</div>";
    $("#gallery").append(content).hide().fadeIn(250);
}

});

var songSearch = function(keyword){
var foundFlag = false;
var content = "";

for (var i = 0; i < src.length; i++){
if (tags[i].toLowerCase().indexOf(keyword) != -1 || keyword == "") {
    content = "<div class='pics' id='imagesection" + i + "'>";
        content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
    content += "</div>";

        findFlag = true;
    }

}

if(findFlag){
document.getElementById("gallery").innerHTML = content;
}
else{
    content = "Your search did not return any results.";
}

 }

</script>

Answer 1

It looks like the problem is on this line in the songSearch function:

content = "<div class='pics' id='imagesection" + i + "'>";

You are redefining the variable content instead of concatenating it. This way it will always be just the last image. Try changing it to:

content += "<div class='pics' id='imagesection" + i + "'>";

There is also have a variable inside the songSearch function called foundFlag that is later referenced as findFlag. That shouldn't be causing the issue though.