Searching for multiple items from a list in a second list

by Akram kamal

HTML

<div id="filter">
	<label for="filter_chemistry">Chemistry :</label>
		<input type="text" name="filter_chemistry" id="filter_chemistry" class="filter" size="7">
	<label for="filter_mfft">MFFT :</label>
		<input type="number" name="filter_mfft_min" id="filter_mfft_min" class="filter" min="0" max="100" step="1" size="5" placeholder="From">
		<input type="number" name="filter_mfft_max" id="filter_mfft_max" class="filter" min="0" max="100" step="1" size="5" placeholder="To">
    <label for="filter_source">Source :</label>
		<select name="filter_source" id="filter_source" class="filter">
			<option value="">All</option>
			<option value="Supply1">Supply1</option>
			<option value="Supply2">Supply2</option>
		</select>
    <span id="clearFilters"><button style="margin-left: 10px;">Clear</button></span>
</div>

<table class="productSelector">
	<thead>
		<tr>
			<th>Grade Name</th>
			<th>Polymer Type</th>
			<th>Solids</th>
			<th>MFFT</th>
			<th>Source</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="gradeName"><strong>Polymer 1</strong></td>
			<td class="polymerTypel">st,ac</td>
			<td class="numericData solids">46</td>
			<td class="numericData mfft">17</td>
			<td class="textData source">Supply1</td>
		</tr>
		<tr>
			<td class="gradeName"><strong>Polymer 2</strong></td>
			<td class="polymerTypel">ac</td>
			<td class="numericData solids">47</td>
			<td class="numericData mfft">27</td>
			<td class="textData source">Supply1</td>
		</tr>
		<tr>
			<td class="gradeName"><strong>Polymer 3</strong></td>
			<td class="polymerTypel">st,bde</td>
			<td class="numericData solids">47</td>
			<td class="numericData mfft">6</td>
			<td class="textData source">Supply2</td>
		</tr>
    </tbody>
</table>

CSS

table.productSelector { border-collapse: collapse; }
.productSelector thead th { text-align: center; border-bottom: 1px solid #999; border-right: 1px solid #999; padding: 10px; }
.productSelector thead th:last-child { border-right: 0px; }
.productSelector tbody td { border-bottom: 1px solid #EEE; border-right: 1px solid #999; padding: 20px 10px; }
.productSelector tbody td:last-child { border-right: 0px solid #FFF; }

#filter label { padding-left: 15px; }
#filter label:first-child { padding-left: 0px; }
#filter { margin-bottom: 20px; }

JavaScript

jQuery(document).ready(function($) {

	function doFilters() {
		$("tr:hidden").show();
		// Chemistry
		if ($("#filter_chemistry").val() != "") {
			var chemFilter = $("#filter_chemistry").val().toLowerCase().split(',');
			$("td.polymerTypel").each(function(){

				var texts = $(this).text().split(',');
				var match = chemFilter.every(function(v) { return texts.indexOf(v) != -1; });
				$(this).parent().toggle(!!match);
				
			});
		} // END: Chemistry
		// MFFT
		if (($("#filter_mfft_min").val() != "") && ($("#filter_mfft_max").val() != "")) {
			var mfftMin = parseInt($("#filter_mfft_min").val());
			var mfftMax = parseInt($("#filter_mfft_max").val());
			$("td.mfft").not(function () {
				return parseInt($(this).text()) >= mfftMin && parseInt($(this).text()) <= mfftMax;
			}).parent().hide();
		} // END: MFFT
		// Source
		if ($("#filter_source").val() != "") {
			$("td.source").not(":contains('" + $("#filter_source").val() + "')").parent().hide();
		} // END: Source
	};
	
    $("#clearFilters").click(function() { $("input[type=text], input[type=number], select").val(""); doFilters(); });
	// Default Min/Max if required
	$("#filter_mfft_min").keyup(function() { if ($("#filter_mfft_max").val() == "") { $("#filter_mfft_max").val('100') } });
	$("#filter_mfft_min").change(function() { if ($("#filter_mfft_max").val() == "") { $("#filter_mfft_max").val('100') } });
	$("#filter_mfft_max").keyup(function() { if ($("#filter_mfft_min").val() == "") { $("#filter_mfft_min").val('0') } });
	$("#filter_mfft_max").change(function() { if ($("#filter_mfft_min").val() == "") { $("#filter_mfft_min").val('0') } });
	// filters trigger
	$(".filter").keyup(function () { doFilters(); });
	$(".filter").change(function () { doFilters(); });
});