JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.14.0/js/selectize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.14.0/css/selectize.css">
<form name="pageFilterForm" id="pageFilterForm" method="POST" class="col grid_12_of_12">
<input type="hidden" name="customer_id" value="125" id="customer_id">
<select name="saleCatFilter" id="saleCatFilter" class="saleCatFilter" multiple>
<option value="">All Sale Categories</option>
<option value="1">Customer</option>
<option value="2">Internal</option>
<option value="3">Warranty</option>
</select>
<select name="saleTypeFilter" id="saleTypeFilter" class="saleTypeFilter" multiple>
<option value="">All Sale Types</option>
<option value="1">CUSTOMER</option>
<option value="2">INTERNAL</option>
<option value="3">WARRANTY</option>
</select>
<a href="" class="small dark_blue">reset</a>
</form>
CSS
#pageFilterForm {
display: flex;
justify-content: center;
align-items: center;
}
#pageFilterForm #saleCatFilter,
#pageFilterForm #saleTypeFilter {
display:none;
}
#pageFilterForm .selectize-control {
margin-right: 0.5rem;
min-width: 180px;
max-width: 25%;
text-align: left;
}
#pageFilterForm .saleCatFilter {
margin-left: 0.5rem;
}
JavaScript
$( function() {
$saleCatFilter = $("#saleCatFilter").selectize({
plugins: ['remove_button'],
placeholder: 'All Sale Categories',
closeAfterSelect: true,
onChange: function(value) {
trackEvent('PartsDeptPerformance', 'PageFilter', 'FilterSaleCat');
$saleCatFilter.blur();
},
onItemRemove: function(value) {
$saleCatFilter.close();
$saleCatFilter.focus();
}
});
$saleTypeFilter = $("#saleTypeFilter").selectize({
plugins: ['remove_button'],
placeholder: 'All Sale Types',
closeAfterSelect: true,
onChange: function(value) {
trackEvent('PartsDeptPerformance', 'PageFilter', 'FilterSaleType');
$saleTypeFilter.blur();
},
onItemRemove: function(value) {
$saleTypeFilter.close();
$saleTypeFilter.focus();
}
});
});