0

I am trying to implement a rudimentary site search for a page of images. The search function should go through each element in a specific class looking for a word match in the image's alt text.

I think my issue is with binding the function to a form submit but I can't seem to figure out where I went wrong.

I have tried this with jQuery (fiddle:http://jsfiddle.net/u2oewez4/)

$(document).ready(function(){
$("#search-form").click(function() {

var searchQuery = "Text";

$.each('.single-image', function(){
$(this).children("img").attr("alt"):contains(searchQuery).hide("slow");
});
});
});

As well as with JavaScript (fiddle:http://jsfiddle.net/m3LkxL1c/)

function submitSearch(){

// create regex with query
var searchQuery = new RegExp(document.getElementById('search-input').value);  

// create array of content to look for query in    
var content = document.getElementsByClassName("single-image");   

// create an array to put the results to hide in 
var hideResults = [];     

var imagesToHide = document.getElementsByClassName("single-image-hide");  

// get the current display value
var displaySetting = imagesToHide.style.display;              


for (i=0; i<content.length; i++) {
if (! searchQuery.test(content[i].firstChild.firstChild.nodeValue)) {   

// if the query not found for this result in query
hideResults.push(content[i]);           

// push to the hideResults array
content[i].className = "single-image-hide";   

// change class name so CSS can take care of hiding element
document.getElementById("form-success").style.display = 'inline-block';
alert(searchQuery); // for debugging
return false; // results will not stick without this?
}
}

// set display to hidden
if(displaySetting == 'inline-block'){
imagesToHide.style.display = 'none';          // map is visible, so hide it
}
else{
imagesToHide.style.display = 'inline-block';  // map is hidden so show it
}
}

FYI I have built the JQuery off a few StackOverflow threads, so I've definitely tried my best to find a similar example. (Similar functions: here, and here)

Community
  • 1
  • 1
Michelle
  • 7
  • 4
  • Okay, several problems right off. You have multiple elements with the same id. This won't work. Only one element per id, and only one id per element, ids are unique. Use classes if you want multiple elements with the same styles or to be selected at the same time. – James G. Aug 28 '14 at 03:31
  • method="post" will send the info from the form via post. This is useful if you're sending the data to be used by a serverside language, like PHP. Here, you don't even need the form element. – James G. Aug 28 '14 at 03:33
  • I'm typing an answer right now. You also are using the wrong each function. You should be using selector first for an array of jQuery objects. – James G. Aug 28 '14 at 03:40
  • Use .find(selcector) when you want a child of a certain tag, class or id, not .children(selector) – James G. Aug 28 '14 at 03:43

1 Answers1

0

Okay, various bug fixes, most of which I noted in the comments already because I wanted to make sure not to miss any. You need to read the details for in the jQuery documentation much more closely. That'll fix a lot of the problems you're having, like using the wrong each function. Other things will come with time. Keep studying, and READ THE DOCUMENTATION.

$("#search-form").click(function() {
    //this gets the val for the search box, then puts the Imgs in a variable so we don't have to use the selector multiple times. Selectors are expensive time-wise, stored variables are not.
    var searchQuery = $("#search-text").val(),
        singleImgs = $('.single-image');

    //you have to show the images for each new iteration, or they'll remain hidden
    singleImgs.show();
    singleImgs.each(function(){
        //get alt attribute
        var thisAlt = $(this).find("img").attr("alt");
        //if thisAlt does not contains searchQuery (use > instead of === for does)
        if(thisAlt.indexOf(searchQuery) === -1){
            $(this).hide();                
        }
    });
});

working fiddle

James G.
  • 2,852
  • 3
  • 28
  • 52
  • thank you! This is very helpful and works perfectly. I appreciate you adding context in the comments since there are steps I would not have thought of with such little experience in JQuery. – Michelle Aug 28 '14 at 19:23