Can you help me implement a search filter using buttons with the Isotope Plugin?
For example, entering a search value in an input field and then clicking a search button to display the search results. How can I achieve this using buttons? Below is the HTML and JS code snippets along with a Codepen link for reference. View Codepen link
$(function() {
var $grid = $('#container');
$grid.isotope({
itemSelector: '.item'
});
var filters = [];
//Button-Search
$('#btn').on('click', function() {
filters[0] = this.value;
runFilter();
});
$('#filter-select').on('change', function() {
filters[1] = this.value;
runFilter();
});
var runFilter = function() {
$grid.isotope({
filter: function() {
if (filters[0]) {
var qsRegex = new RegExp(filters[0], 'gi');
if (!$(this).find('.content-title').text().match(qsRegex)) {
return false;
}
}
if (filters[1]) {
if (!($(this).hasClass(filters[1]))) {
return false;
}
}
return true;
}
});
}
});<input type="text" id="search" placeholder="Search"></input>
<button type="submit" id="btn">Click Me</button>