Forum | Appery.io

I've a grid, with an image block inside every cell of the gird. The images set are static and are not called from any db. I want to have a search functionality such that when I enter the name of any image, the image should be filtered from other images and should show up.
I just want to know how this can be achieved?

Well from what you mentioned, it may not be a good idea to have pictures in a grid in the manner you have for one reason - Say I type in something in the search box and it happens to be the 4th image...what happens with the first 3 images? They are going to be hidden? If yes, won't they still take up space? Having a single image per row can help. And another way would be to set height to auto in which case I think it collapses if you hide all the elements in the row.

As for the JS part, here's what you can use to show / hide images based on the file name

But before you proceed remember to assign a CLASS to your grid called 'mygridclass'

This is because I am looping through all the images in that class - img

And add this JS code in the keyup event of your search box

code
String.prototype.filename=function(extension){
var s= this.replace(/\/g, '/');
s= s.substring(s.lastIndexOf('/')+ 1);
return extension? s.replace(/[?#].+$/, ''): s.split('.')[0];
};

var typedFilename = $(this).val().toLowerCase().match(/\S+/g);
if (!typedFilename) {
$('.mygridclass img').show();
} else {
$('.mygridclass img').each(
function(){
var imgFilename = $(this).attr('src').filename().toLowerCase();
var show = typedFilename.some(function(word) {
return imgFilename.indexOf(word);
});
$(this).toggle(show);
});
}
/code

And you have to add this to the page show event so that when you click the cross / clear button in the search box, it resets the search

code
$('.ui-input-search.ui-input-has-clear .ui-btn.ui-input-clear, .ui-input-text.ui-input-has-clear .ui-btn.ui-input-clear').on('click', function(){
$('.mygridclass img').show();
});
/code

This is what I'm getting

here's a project backup that you can restore and test

https://www.dropbox.com/s/i35gxet0b4u...

I have moved the functions to a seperate JS file and I am calling the function on keyup event of search box. Btw do remember to give the class name to the grid

Thank you, I'll try