Обьеденить фильтр input search c select
 

Добрый день! Подскажите пожалуйста. У меня есть фильтр который фильтрует вакансии по названию при вводе текста в инпут и по городу и отделу при выборе 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});
    });

KatyJ, "поисковая" функция должна быть одна.
Вызывать ее можно по событиям как в инпуте, так и в селекте. Эта функция должно использовать оба критерия в поиске.

Или ты вообще не программист и тебе нужно чтобы кто-то написал такую программу?