Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.09.2022, 11:56
Интересующийся
Отправить личное сообщение для KatyJ Посмотреть профиль Найти все сообщения от KatyJ
 
Регистрация: 19.03.2018
Сообщений: 13

Обьеденить фильтр 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, 15.09.2022 в 12:01.
Ответить с цитированием
  #2 (permalink)  
Старый 15.09.2022, 14:46
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,113

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как в input поместить значение select kobriyyu Events/DOM/Window 1 23.03.2021 07:16
Проверка полей input и select на обязательность функция Jquery find() mxup Общие вопросы Javascript 5 02.08.2016 06:32
Проблемы с элементами select и input razorg1991 Элементы интерфейса 10 06.01.2016 01:09
Замена input на select dima_riabets Общие вопросы Javascript 8 16.01.2015 21:28
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27