CODEWITHSUNDEEP
javascriptjqueryhtml
Garrett
Garrett

Reputation: 97

Search and return images on page

I have a site that loads 1000+ small images on page at one time. There is no text on page, just the images. If I had a search bar at the top and wanted to filter through the images and return one based on filename or alt text.. is this possible? with Javascript/jQuery? or maybe another means?

Any help implementing this would be awesome.

Upvotes: 2

Views: 2121

Answers (5)

Fenton
Fenton

Reputation: 250922

You can grab all image elements using:

var allImages = document.getElementsByTagName('img');

You can then check the src attribute to find a match.

var i;
var search = 'test';
var matches = [];
for (i = 0; i < allImages.length; i+) {
    if (allImages[i].src.indexOf(search) > -1) {
        matches.push(allImages[i]);
    }
}

So now you have an array of matches.

You can write them somewhere, like this...

var searchResults = document.getElementById('results');
for (i = 0; i < matches.length; i++) {
    searchResults.appendChild(matches[i]);
}

You don't have to use the src, you could use any attribute on the image, including your own data-keywords tag if you really wanted. You might want to make things a lot more clever if you allow multiple words to be entered as a search.

Here is a simple example handling multiple words, which could appear in any order:

var i;
var search = 'test multi word';
var searchTerms = search.split(' ');
var matches = [];

var isMatch = function (haystack, needles) {
    for (var i = 0; i < needles.length; i++) {
        if (haystack.indexOf(needles[i]) === -1) {
            return false;
        }
    }
    return true;
}

for (i = 0; i < allImages.length; i+) {
    if (isMatch(allImages[i].src, searchTerms)) {
        matches.push(allImages[i]);
    }
}

Upvotes: 1

sdespont
sdespont

Reputation: 14025

Based on photo name for example, you can search through your photos like this:

var photoName = "photo name";
$('img[src*="'+photoName+'"]').each(function(){
   //Do what you want with the found photos
});

EDIT

You can use others images attributes like alt or title

Upvotes: 3

fabriciorissetto
fabriciorissetto

Reputation: 10063

It depends on how the HTML is structured.

If the images are included directly on IMG tags() you can find it using a code like below:

$("img").each(function(){
     console.log("ALT: " + $(this).attr("alt"));
     console.log("FILE PATH AND NAME: " + $(this).attr("src"));
});

Note that neither whenever you sees an image in the browser it is necessarily an IMG tag. The image can be the background of a CSS class, for example.

Upvotes: 0

Paul Fleming
Paul Fleming

Reputation: 24526

This working example makes use of the jQuery contains selector.

Markup:

<img alt="abc" src="def.gif" />
<img alt="bcd" src="efg.png" />
<input id="search" type="text" placeholder="Search" />
<div id="results"></div>​

JS:

$(function() {
    $('#search').change(function(){
        var s = $(this).val();
        var results = $('img[alt*="' + s + '"],img[src*="' + s + '"]');
        var output = $('<div></div>').append(results.clone());
        $('#results').text(output.html());
    });
});​

If you want to see the images in the results rather than the markup then change $('#results').text(output.html()); to $('#results').html(output.html());. Note that this will also include the search results in the following search. Here's a working example the displays the search results.

Upvotes: 2

Dan Crews
Dan Crews

Reputation: 3597

(jQuery)

Well, if you had an input field,

$field.on('keyup', function(evt) {
  $('img:not(
      [src*="' + $(this).val() + '"],
      [src*="' + $(this).attr('alt') + '"]
   )').hide();
});

That might work. I haven't tried that out, but in my head it would. Basically, it would just hide everything that doesn't apply to the search term.

Upvotes: 0

Related Questions