Add the script to include a search within filters
<!-- Start IS+ -->
<script type="text/javascript">
var __isp_options = __isp_options || {};
__isp_options.isp_serp_callback = function(data, facets_only) {
if ($('.filter-input').length < 1) {
$jquery_isp(".isp_facet_title").each(function() {
let checkParent = $(this).parent().attr('class').match(/[\d\w-_]+/g)[1];
let parentData = document.querySelector('.' + checkParent);
if ($(parentData).children('.isp_facet_value').length > 2)
$(this).after(`<input type="text" isp_ignore class="filter-input" placeholder="Refine Search">`)
});
}
$(document).on('click', '.filter-input', function() {
// locate parent div of clicked
let clickedInput = $(this).parent().attr('class').match(/[\d\w-_]+/g)[1]
let searchInput = document.querySelector('.' + clickedInput + ' ' + '.filter-input');
// get all title
let titles = document.querySelectorAll('.isp_single_facet_wrapper' + '.' + clickedInput + ' ' + '.isp_facet_value');
let searchTerm = '';
let tit = '';
function search(e) {
e.stopImmediatePropagation(); //run function once
if ($('.isp_single_facet_wrapper' + '.' + clickedInput + ' ' + '.isp_facet_unvisible_values').css('display') === "none") {
$('.' + clickedInput + ' ' + '.isp_facet_show_hide_values').trigger('click');
}
// get input fieled value and change it to lower case
searchTerm = e.target.value.toLowerCase();
titles.forEach((title) => {
// navigate to p in the title, get its value and change it to lower case
tit = title.textContent.toLowerCase();
// it search term not in the title's title hide the title. otherwise, show it.
tit.includes(searchTerm) ? title.style.display = 'block' : title.style.display = 'none';
});
}
// get input field and add 'keyup' event listener
searchInput.addEventListener('keyup', search);
});
};
</script>
<style>
aside#faceted-search-container {
display: none !important;
}
.filter-input{
width: 100% !important;
height: 35px !important;
margin-bottom: 15px !important;
padding-left: 7px !important;
margin-top: 10px !important;
}
#isp_left_container_facets .isp_facet_value a .isp_facet_value_name .isp_facet_value_counter{
font-size: 12px !important;
color: #d14343 !important;
}
span.isp_facet_value_name_not_selected {
color: #666 !important;
}
span.isp_facet_value_name_selected {
font-weight: 400 !important;
font-size: 15px !important;
color: #666 !important;
}
</style>