Добрый день! Подскажите пожалуйста. У меня есть фильтр который фильтрует вакансии по названию при вводе текста в инпут и по городу и отделу при выборе select. Оба фильтра хорошо работают. Но проблема в том, что они не работают вместе. То есть например, если мы выбираем город, то при вводе тества в инпут поиск должен быть только среди ваканчий в этом городе. А не среди всех. Ниже прикрепляю код. Подскажите пожалуйста, как обьеденить эти два фильтра. Буду очень благодарна, за помощь!
<div class="main-screen-form">
<div class="search-input__wrapper">
<input type="text" placeholder="Zoek op functie of trefwoord" class="search-input" id="filter">
<div class="searh-input-btn">
ZOEKEN
</div>
</div>
<div class="filter-row">
<div class="location-select">
<select class="select" id="city-select">
<option value="all" selected="">Alle locaties</option>
<option value="Amersfoort">Amersfoort</option>
<option value="Amsterdam">Amsterdam</option>
<option value="Antwerpen">Antwerpen</option>
<option value="Apeldoorn">Apeldoorn</option>
<option value="Arnhem">Arnhem</option>
<option value="Den Haag">Den Haag</option>
<option value="Eindhoven">Eindhoven</option>
</select>
</div>
<div class="department-select">
<select class="select" id="department-select">
<option value="all" selected="">Alle afdelingen</option>
<option value="HR">HR</option>
<option value="Marketing">Marketing</option>
<option value="Sales">Sales</option>
<option value="Design">Design</option>
</select>
</div>
</div>
</div>
<ul class="row">
<li class="col-lg-4 col-md-6 card-item wow fadeIn" data-wow-offset="280">
<a href="" class="vacancies__item">
<div class="card__inner-tags" data-department="Marketing" data-city="Amersfoort">
<div class="vacancies__item-title">
Copywriter
Arbeidsmarktcommunicatie
</div>
<p>
Copy schrijven waar talent op de arbeidsmarkt warm van wordt.
</p>
<div class="vacancies__item-tags">
<div class="vacancies__item-tag">
<div class="tag-icon-wrapper">
<img src="img/tag-1.svg" alt="">
</div>
Amersfoort
</div>
<div class="vacancies__item-tag">
<div class="tag-icon-wrapper">
<img src="img/tag-2.svg" alt="">
</div>
Marketing
</div>
<div class="vacancies__item-tag">
<div class="tag-icon-wrapper">
<img src="img/tag-3.svg" alt="">
</div>
40 uur
</div>
</div>
<div class="link">
Bekijk vacature
<img src="img/link-img.svg" alt="">
</div>
</div>
</a>
</li>
<li class="col-lg-4 col-md-6 card-item wow fadeIn" data-wow-offset="280">
<a href="" class="vacancies__item">
<div class="card__inner-tags" data-department="HR" data-city="Amsterdam">
<div class="vacancies__item-title ">
UX Designer
</div>
<p>
Copy schrijven waar talent op de arbeidsmarkt warm van wordt.
</p>
<div class="vacancies__item-tags">
<div class="vacancies__item-tag">
<div class="tag-icon-wrapper">
<img src="img/tag-1.svg" alt="">
</div>
Amsterdam
</div>
<div class="vacancies__item-tag">
<div class="tag-icon-wrapper">
<img src="img/tag-2.svg" alt="">
</div>
HR
</div>
<div class="vacancies__item-tag">
<div class="tag-icon-wrapper">
<img src="img/tag-3.svg" alt="">
</div>
40 uur
</div>
</div>
<div class="link">
Bekijk vacature
<img src="img/link-img.svg" alt="">
</div>
</div>
</a>
</li>
</ul>
$(document).ready(function () {
$("#filter").keyup(function () {
var filter = $(this).val(),
count = 0;
$("li").each(function () {
if ($(this).find(".vacancies__item-title").text().search(new RegExp(filter, "i")) < 0) {
$(this).find('.vacancies__item-title').parent().parent().parent().fadeOut(0).addClass('hidden');
} else {
$(this).find('.vacancies__item-title').parent().parent().parent().show().removeClass('hidden');
count++;
}
});
if(count == 0) {
document.getElementsByClassName('no-results')[0].style.display = 'block';
} else {
document.getElementsByClassName('no-results')[0].style.display = 'none';
}
});
});
let citySelect = document.getElementById('city-select');
let departmentSelect = document.getElementById('department-select');
let educationSelect = document.getElementById('education-select');
var change = new Event('change')
$("#city-select").on("change", function () {
let vacancies = 0;
document.querySelectorAll('.card__inner-tags').forEach(item=>{
if( ( item.dataset.department.indexOf(departmentSelect.value) != -1 || departmentSelect.value == 'all' ) && ( item.dataset.city.indexOf(citySelect.value) != -1 || citySelect.value == 'all' )){
item.closest('.card-item').style.display = 'flex';
vacancies++;
}
else{
item.closest('.card-item').style.display = 'none';
}
});
if(vacancies == 0) {
document.getElementsByClassName('no-results')[0].style.display = 'block';
} else {
document.getElementsByClassName('no-results')[0].style.display = 'none';
}
});
$("#department-select").on("change", function () {
let vacancies = 0;
document.querySelectorAll('.card__inner-tags').forEach(item=>{
if( ( item.dataset.department.indexOf(departmentSelect.value) != -1 || departmentSelect.value == 'all' ) && ( item.dataset.city.indexOf(citySelect.value) != -1 || citySelect.value == 'all' )){
item.closest('.card-item').style.display = 'flex';
vacancies++;
}
else{
item.closest('.card-item').style.display = 'none';
}
});
if(vacancies == 0) {
document.getElementsByClassName('no-results')[0].style.display = 'block';
} else {
document.getElementsByClassName('no-results')[0].style.display = 'none';
}
});
$("#city-select").on('click', (event) => {
dataLayer.push({event:'customClickEvent', eventCategory: 'Filter', eventAction: 'Filter', eventLabel: 'LOCATION/'+citySelect.value});
});
$("#department-select").on("change", (event) => {
dataLayer.push({event:'customClickEvent', eventCategory: 'Filter', eventAction: 'Filter', eventLabel: 'AFDELING/'+departmentSelect.value});
});
