Impostare un filtro con Isotope da input text

Isotope è una piccola libreria per Javascript / jQuery per impostare dei filtri in una pagina web.

La documentazione è ben fatta, e il plugin è facile e veloce.

Ma non ci sono esempi su come usare i filtri ricercando dentro ad una input text.

Oggi vediamo proprio questo, considerando che dal punto di vista della struttura HTML cambia molto poco:

<p>
	<input type="text" class="quicksearch text-uppercase" placeholder="Cerca...">
</p>

<div class="grid">
  <div class="element-item">...</div>
  <div class="element-item">...</div>
  <div class="element-item">...</div>
</div>

In sostanza abbiamo aggiunto solo una input text.

Questo invece il codice Javascript (nel mio caso mixato con jQuery, ma non è obbligatorio):

$(document).ready(function () {
	var qsRegex;

	var $grid = $('.grid').isotope({
		itemSelector: '.element-item',
		layoutMode: 'fitRows',
		filter: function () {
			return qsRegex ? $(this).text().match(qsRegex) : true;
		}
	});

	var $quicksearch = $('.quicksearch').keyup(debounce(function () {
		qsRegex = new RegExp($quicksearch.val().toUpperCase(), 'gi');
		console.log(qsRegex);
		$grid.isotope();
	}, 200));

	function debounce(fn, threshold) {
		var timeout;
		threshold = threshold || 100;
		return function debounced() {
			clearTimeout(timeout);
			var args = arguments;
			var _this = this;

			function delayed() {
				fn.apply(_this, args);
			}

			timeout = setTimeout(delayed, threshold);
		};
	}
});

Questo andrà ad applicare il filtro di Isotope con una RegExp (espressione regolare); quindi questo implica due cose:

• potete impostare la RegExp che volete, a seconda delle vostre esigenze
• potete comunque impostare i pulsanti per la cetgorie, e filtrare anche per quelle

Enjoy!