JavaScript Kategoriefilter für Beiträge – categorize.js

categorize it!

Folgendes Szenario: Man hat beispielsweise eine Newsseite mit diversen Beiträgen aus verschiedenen Kategorien und möchte dem User die Möglichkeit bieten, diese Einträge nach Kategorie zu filtern.

Dazu habe ich ein kleines Script geschrieben, welches von jQuery gebrauch macht. Weiter wird Bootstrap für die Gestaltung des HTML Markups verwendet.
Für einen hübschen FadeIn Effekt der Beiträge wurde auf animate.css zurückgegriffen und die Icons stammen von fontawesome.

Das HTML Markup sieht dabei wiefolgt aus:
Zunächst wird ein select-Element angelegt mit den verschiedenen Kategorien. Der value der Default-Option muss dabei immer „default“ heißen (siehe unten).
Alle weiteren Kategorien können beliebig gewählt und benannt werden.

<select id="selection" class="form-control">
  <option value="default">Alle</option>
  <option value="veranstaltungen">Veranstaltungen</option>
  <option value="karriere">Karriere</option>
  <option value="news">News</option>
</select>

Das Markup für einen Beitrag kann prinzipiell beliebig gewählt werden. Der Beitrag muss lediglich mit dem HTML data-* Attribut versehen werden und bei Änderung des Markups müssen die jQuery Selektoren (unten .item-page .row) an das eigene Markup angepasst werden. Für das Script wird data-category benötigt und sollte den ganzen Eintrag umschließen (wie auch hier unten im Beispiel).

<div class="row animated fadeInUp" data-category="karriere">
	<div class="col-md-12">
		<div class="jumbotron">
			<div class="container">
				<h1>Senior Software Engineer</h1>
				<span class="label label-info"><i class="fa fa-calendar"></i> Start: 01.09.2015</span><br /><br />

				<p>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
					Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
					et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
					pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
					fringilla vel, aliquet nec, vulputate eget, arcu.
				</p>

				<button type="button" class="btn btn-info">Bewerben</button>
			</div>
		</div>
	</div>
</div>

Das eigentliche Script erledigt dann den Filtervorgang:

jQuery(document).ready(function() {
	var select = document.getElementById("selection");

	select.onchange = function() {
		if (this.value === "default") {
			jQuery(".item-page .row").each(function() {
				if (jQuery(this).hasClass("hide")) {
					jQuery(this).removeClass("hide");
				}
			});
		}
		else {
			resetAll();
			var category = this.value;

			jQuery(".item-page .row").each(function() {
				if (jQuery(this).attr('data-category') !== category) {
					jQuery(this).addClass("hide");
				}
			});
		}
	}
})

function resetAll() {
	jQuery(".item-page .row").each(function() {
		if (!!jQuery(this).attr('data-category')) {
			jQuery(this).removeClass("hide");
		}
	});
}

Die Klasse .hide ist in Bootstrap definiert und macht nichts anderes als display: none !important.

Das komplette Projekt gibt´s hier: categorize.js

Leave a Comment.


*