JSFiddle - React, Tailwind, and code Playground

by stuttufu

HTML

<div class="row">
	<div class="small-12 columns">
		<form>
			<fieldset class="fieldset">
				<legend>Filtra servizi</legend>
				<div class="row">
					<div class="small-12 medium-4 columns">
						<input type="text" id="filtroNome" placeholder="cerca">
					</div>
					<div class="small-12 medium-4 columns">
						<!-- <label>Scegli una categoria -->
							<select id="filtroServizio">
								<option default="" value="">Scegli una categoria</option>
									<option value="type-1">type 1</option>
									<option value="type-2">type 2</option>
									<option value="type-3">type 3</option>
									<option value="type-4">type 4</option>
									<option value="type-5">type 5</option>
							</select>
						<!-- </label> -->

					</div>
					<div class="small-12 medium-4 columns">

						<!-- <label>Scegli una categoria -->
							<select id="filtroNormativa">
								<option default="" value="">Scegli una normativa</option>
									<option value="normativa-1">normativa 1</option>
									<option value="normativa-2">normativa 2</option>
									<option value="normativa-3">normativa 3</option>
									<option value="normativa-4">normativa 4</option>
									<option value="normativa-5">normativa 5</option>
							</select>
						<!-- </label> -->
					</div>

				</div>
			</fieldset>
		</form>
	</div>
</div>
<div class="" id="servicelist">


		<div class="row servizio" data-service-type="type-5" data-service-normativa="normativa-1">
		<div class="small-12 columns">
			<div class="row">
				<div class="small-12 columns">
					<h4><a href="#" class="nomeservizio">Nome servizio 0</a></h4>
				</div>
			</div>
			<div class="row">
				<div class="small-12 medium-4  columns">
					<figure>
						<a href="#">
							<img data-interchange="[https://placeimg.com/400/300/tech/grayscale?i=0, small], [https://placeimg.com/200/150/tech/grayscale?i=0, medium], [https://placeimg.com/400/300/tech/grayscale?i=0, large]"...

JavaScript

$(document).ready(function() {
  
  function filtraServizi() {
		var nome = $("#filtroNome").val();
    var tipo = $("#filtroServizio").val();
    var normativa = $("#filtroNormativa").val();
		$("#servicelist .servizio").each(function(index, elem) {
      var $serviceContainer = $(elem);
      var nomeServizio = $serviceContainer.find(".nomeservizio").text();
      var tipoServizio = $serviceContainer.attr("data-service-type");
      var normativaServizio = $serviceContainer.attr("data-service-normativa");
      if (nome.length > 0 && nomeServizio.indexOf(nome) < 0) {
        $serviceContainer.hide();
      } else {
        if (tipo.length > 0 && tipoServizio !== tipo) {
          $serviceContainer.hide();
        } else if (normativa.length > 0 && normativaServizio.indexOf(normativa) < 0) {
          $serviceContainer.hide();
        } else {
          $serviceContainer.show();
        }
      }
		});
  }
  
	$("#filtroNome").on("keyup", function() {
    filtraServizi();
	});
  
	$("#filtroServizio").change(function() {
    filtraServizi();
	});

	$("#filtroNormativa").change(function() {
    filtraServizi();
	});

});