A Search Field for Gridzy.Js

The filter functionality of Gridzy.js 2 is still powerful. However, let’s add even more power. Let’s build a search field.

---

Set up the HTML

First we need to set up the search field:

<input id="mySearchField" type="text" value="" />

Instead of the id mySearchField you could use any other id or any class name. Just ensure that the field is selectable via a CSS selector.

Now we set up the gallery:

<div class="gridzy gridzySkinClassic" data-gridzySearchField="#mySearchField">
	<div>
		<img class="gridzyImage" src="https://dummyimage.com/300x400/ff9900/ffffff" alt="a random image" />
		<span class="gridzyCaption">This text can be found!</span>
	</div>
	<div data-gridzySearchText="This text can be found as well!">
		<img class="gridzyImage" src="https://dummyimage.com/480x270/3399ff/ffffff" alt="another random image" />
		<span class="gridzyCaption">But this text can't be found, because the attribute data-gridzySearchText is defined for this item.</span>
	</div>
	<div>
		<img class="gridzyImage" src="https://dummyimage.com/400x300/99ff00/000000" alt="yet another random image" />
		<span class="gridzyCaption">This text can be found!</span>
	</div>
	<div>
		<img class="gridzyImage" src="https://dummyimage.com/270x480/9933ff/ffffff" alt="a random image again" />
		<span class="gridzyCaption">This text can be found!</span>
	</div>
	<div>
		<img class="gridzyImage" src="https://dummyimage.com/400x300/ffff00/000000" alt="one last random image" />
		<span class="gridzyCaption">This text can be found!</span>
	</div>
</div>

As you can see, there is an attribute data-gridzySearchField in the main container element. With this attribute we connect the gallery and the search field to each other. Just enter a CSS selector that selects the search field.

There is also an other special attribute data-gridzySearchText, that you can see on one of the direct child elements. Usually you don’t need this attribute, because usually the item content will be used as searchable text. But you may want to search not the content of the item itself, but something else. For such a case, this attribute exists. So, this attribute is fully optional.

Implement the Functionality

Lastly we need to add the following code snippet directly before the closing </body> . (You could also put it into a Javascript file of course. Just consider to place it anywhere after the main Gridzy.js file.)

<script>
document.addEventListener('DOMContentLoaded', function() {
	var gridzyElements = document.querySelectorAll('.gridzy[data-gridzySearchField]'),
	    pos = gridzyElements.length;

	while (pos--) {
		(function(gridzyElement) {
			var searchField = document.querySelector(gridzyElement.getAttribute('data-gridzySearchField'));
			var gridzyInstance = gridzyElement.gridzy;
			var gridzyItems = gridzyElement.children;

			if (searchField) {
				searchField.addEventListener('input', search);
			}

			function search() {
				var pos = gridzyItems.length,
				    child,
				    itemContent,
				    found = false,
				    searchValue = searchField.value.toLowerCase();

				if (searchValue) {
					while (pos--) {
						child = gridzyItems[pos];
						itemContent = (child.getAttribute('data-gridzySearchText') || child.innerText).toLowerCase();
						found = -1 < itemContent.search(searchValue);
						child.classList[found ? 'add' : 'remove']('searchResult');
					}
					if (gridzyInstance.getOption('filter') !== '.searchResult') {
						gridzyInstance.setOptions({filter:'.searchResult'});
					}
				} else {
					while (pos--) {
						gridzyItems[pos].classList.remove('searchResult');
					}
					if (gridzyInstance.getOption('filter') !== Gridzy.getDefaultOption('filter')) {
						gridzyInstance.setOptions({filter:null});
					}
				}
			}
		})(gridzyElements[pos]);
	}
});
</script>

That’s it!

In this example, I’m using the skin gridzySkinClassic, because if we use captions, we’ll need some skin. Of course you can also use any other skin as well. If you don’t know how to use skins, just check the Captions & Skins section in the documentation.

I hope you enjoy your new search field ?
If you have any issues or suggestions, just let me know ✌?