Peremir2
@Peremir2

Как выбрать следующий пункт в списке?

Есть список с городами и полем поиска. Пока в поиске ничего нет, пункты перелистываются стрелочками, по enter переходит по ссылке. Когда начинаю поиск (ввожу символы) и не работает перелистывание, next(), не переходит по пунктам с классом ".city". Как перелистывать когда есть выборка?

<div class="all-regions">
	<div class="inner">
		<div><input type="checkbox" id="delivery-other_check" style="display: none;">&nbsp;<label for="delivery-other_check">Доставка из других регионов</label></div>
		<div><input type="text" class="search-region_row" placeholder="Введите название города"></div>
		<div class="regions_area">
			<div class="regions">
				<a href="/moskau" class="city">Москва</a>
				<a href="/krasnodar" class="city">Краснодар</a>
				<a href="/peterburg" class="city">Санкт-Петербург</a>
				<a href="/nn" class="city">Нижний Новгород</a>
				<a href="/novosib" class="city">Новосибирск</a>
				<a href="/ufa" class="city">Уфа</a>
				<a href="/kazan" class="city">Казань</a>
				<a href="/rostov" class="city">Ростов-на-Дону</a>
				<a href="/samara" class="city">Самара</a>
				<a href="/ekb" class="city">Екатеринбург</a>
				<a href="/chelaba" class="city">Челябинск</a>
				<a href="/salang" class="city">Саланг</a>
				<a href="/peshevar" class="city">Пешевар</a>
				<a href="/kabul" class="city">Кабул</a>
				<a href="/krakov" class="city">Краков</a>
				<a href="/krivbass" class="city">Кривбасс</a>
			</div>
		</div>
		<div class="more"></div>
	</div>
</div>

a {
  display: none;
}
a.city {
	display: block;
}
.city.active {
  background: #ccc none repeat scroll 0 0;
}

$(document).ready(function() {
	// Дать первому городу класс активности
	$(".regions > a.city:first-child").addClass('active').siblings().removeClass('active');
	// Поиск по городам при фокусе на поле поиска
	$(".search-region_row").focus().keyup(function(event) {
		// Назначать всем городам класс видимости, нижеидущий код сортирует
		$(".regions > a").addClass('city');
		// Сортировка городов в диапозоне русского алфавита
		if(event.keyCode >= 65 || event.keyCode <= 90 || event.keyCode == 173) {
			if($(this).val().length >= 1) {
	            var search = $(this).val().toUpperCase();
	            $(".regions > a").each(function () {
	                if ($(this).html().toUpperCase().lastIndexOf(search, 0) == -1) {
	                    $(this).toggleClass('city');
	                }
	            });
	            $(".regions > a.city").eq(0).addClass('active').siblings().removeClass('active');               
	        }
        }
        // По клавише enter переход по выбранной ссылке
		if(event.keyCode == 13) document.location.href = $(".regions > a.city.active").attr('href');
		// Стрелка вверх
		if(event.keyCode == 40) {
           $(".regions > a.city.active:not(:last-child)").removeClass('active').next().addClass('active');
        }
        // Стрелка вниз
        else if (event.keyCode == 38) {
            $(".regions > a.city.active:not(:first-child)").removeClass('active').prev().addClass('active');
        }
	});
});
  • Вопрос задан
  • 108 просмотров
Пригласить эксперта
Ответы на вопрос 1
Ты ввел какую-нибудь букву, например "К". У тебя список
Краснодар //2 элемент
Казань //6 элемент
Кабул
Краков
Кривбасс

а вот эта срочка
$(".regions > a.city.active:not(:last-child)").removeClass('active').next().addClass('active');

добавляет класс следующему элементу. После Казани 3 элемент Санкт-Петербург, к нему и добавить класс active и дальше условие не работает, нет одновременно и .city.active.

если ввести букву "Н", то работает:)
Нижний Новгород //6
Новосибирск //7
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы