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

Question

[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');
        }
	});
});

Answer 1

[Сергей Тутуков]

Ты ввел какую-нибудь букву, например "К". У тебя список

Краснодар //2 элемент
Казань //6 элемент
Кабул
Краков
Кривбасс

а вот эта срочка

$(".regions > a.city.active:not(:last-child)").removeClass('active').next().addClass('active');

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

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

Comments

[Peremir2]

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

[Сергей Тутуков]

Peremir2:

$(".search-region_row").focus().keyup(function(event) {

- focus() - сразу фокусирует курсор на это поле. Мб лучше написать?
$(".search-region_row").keyup(function(event) {

[Сергей Тутуков]

Peremir2:

$(".regions > a.city.active:not(:last-child)").removeClass('active').next().addClass('active');

Заменить на

$(".regions > a.city.active:not(:last-child)").removeClass('active').nextAll('.city').first().addClass('active');

[Сергей Тутуков]

$(".regions > a.city.active:not(:first-child)").removeClass('active').prev().addClass('active');
<code>
Заменить на 
<code>
$(".regions > a.city.active:not(:first-child)").removeClass('active').prevAll('.city').first().addClass('active');
</code>

[Сергей Тутуков]

if(event.keyCode >= 65 || event.keyCode <= 90 || event.keyCode == 173) {

|| - это "или". Условие всегда работает.
Поэтому всегда работает вот это.

$(".regions > a.city").eq(0).addClass('active').siblings().removeClass('active');

- первому элементу .city добавляется класс active.

[Сергей Тутуков]

Peremir2: у тебя логика к сожалению не совсем правильная:(
https://codepen.io/STutukov/pen/jBxJxq?editors=1011 - поставил задержку в 1 секунду, чтобы было наглядно.
Еще раз. Вот этот код ВСЕГДА работает, когда длина импута больше 0 и присваивает ПЕРВОМУ элементу .active

$(".regions > a.city").eq(0).addClass('active').siblings().removeClass('active');