Removed ‘id=”container”‘ then working fine
$(function() {
var $grid = $('#container');
$grid.isotope({
itemSelector: '.item'
});
var filters = []; // A convenient bucket for all the filter options,
// just so we don't have to look them up in the DOM every time.
// (a global array is maybe sort of not the most elegant
// way you could deal with this but you get the idea.)
// Search event handlers
$('.quicksearch').on('keyup', function() {
// debounce removed for brevity, but you'd put it here
filters[0] = this.value;
runFilter();
});
$('#filter-select').on('change', function() {
filters[1] = this.value;
runFilter();
});
// and so on if more filters needed
// The filter itself
var runFilter = function() {
$grid.isotope({
filter: function() {
if (filters[0]) {
// at least some search text was entered:
var qsRegex = new RegExp(filters[0], 'gi');
// if the title doesn't match, eliminate it:
if (!$(this).find('.content-title').text().match(qsRegex)) {
return false;
}
}
if (filters[1]) {
// a category was selected; filter out others:
if (!($(this).hasClass(filters[1]))) {
return false;
}
}
// etcetera, for any other filters
// successfully passed all conditions, so:
return true;
}
});
}
});body {
background-color: #333642;
margin: 0;
}
.item {
float: left;
width: calc(50% - 20px);
padding: 10px;
}
.red .content {
background-color: tomato;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.blue .content {
background-color: dodgerblue;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.green .content {
background-color: green;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.comedy .content {
background-color: #131417;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.content-title {
background-color: gray;
border-radius: 0 0 8px 8px;
text-align: center;
padding: 8px;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<div id="filters">
Color:
<select id="filter-select">
<option value="">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="comedy">Comedy</option>
</select><br> Title: <input type="text" class="quicksearch">
</div>
<div id="container" class="container">
<div class="row">
<div class="red item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>fy Title 1</h3>
</div>
</div>
<div class="blue item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 2</h3>
</div>
</div>
<div class="green item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 3</h3>
</div>
</div>
<div class="red item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 4</h3>
</div>
</div>
<div class="comedy item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 5</h3>
</div>
</div>
<div class="comedy item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 6</h3>
</div>
</div>
<div class="green item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 7</h3>
</div>
</div>
<div class="blue item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 8</h3>
</div>
</div>
<div class="green item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 9</h3>
</div>
</div>
<div class="red item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 10</h3>
</div>
</div>
<div class="comedy item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 11</h3>
</div>
</div>
<div class="blue item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 12</h3>
</div>
</div>
</div>
</div>