RainMEN
@RainMEN
HTML/STYLUS/JADE/JS/Laravel/Joomla/DLE и т.д.

Как фильтровать список городов с помощью Jquery?

Всем привет !

Суть вопроса такая есть список городов https://yadi.sk/i/miaN0MMjj7wJ8

html
<div class="geo-modal">
            <div class="geo-modal-header">
                <div class="geo-modal-title">Выберите город или регион</div>
                <span class="close"><img src="http://detbox.ru/sites/all/themes/detbox/icons/close.png" alt="Закрыть"></span>
            </div>
            <input class="searchGeo" type="text" placeholder="Введите название города для поиска">
            <div class="geo-modal-body">

                <!--Одна область-->
                <div class="geo-wrapper">

                    <!--Название области-->
                    <div class="geo-item geo-item-head"><a class="geo-item-region" href="">Астраханская область</a></div>
                    <!--Название области конец-->

                    <!--Название города-->
                    <div class="geo-item filter-geo-item active"><a class="geo-item-city" href="">Березник</a></div>
                    <!--Название города конец-->

                    <div class="geo-item filter-geo-item "><a data-region="672001" class="geo-item-city" href="">Вельск</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Вычегодский</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Каменка</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Каргополь</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Коноша</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Коряжма</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Котлас</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Кулой</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Малошуйка</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Мезень</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Мирный</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Няндома</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Новодвинск</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Обозерский</a></div>
                </div>
                <!--Одна область конец-->

                <div class="geo-wrapper">
                    <div class="geo-item geo-item-head"><a class="geo-item-region" href="">Брянская область</a></div>
                    <div class="geo-item filter-geo-item active"><a class="geo-item-city" href="">Алтухово</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Белая Берёзка</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Белые Берега</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Брянск</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Бытошь</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Выгоничи</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Вышков</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Дубровка</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Дятьково</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Жуковка</a></div>
                    <div class="geo-item filter-geo-item"><a class="geo-item-city" href="">Злынка</a></div>
                </div>

            </div>


Скрипт который как бы работает
<script>

        (function ($) {
            // custom css expression for a case-insensitive contains()
            jQuery.expr[':'].Contains = function(a,i,m){
                return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
            };

            function filterList(list) {

                $('.searchGeo')
                    .change( function () {
                        var filter = $(this).val();
                            console.log(filter);
                            
                        if(filter) {

                           $matches = $(list).find('a:Contains(' + filter + ')').parent();
                            $('.filter-geo-item', list).not($matches).css({'display':'none'});
                            //$matches.slideDown();


                        } else {
                            $(list).find(".filter-geo-item").css({'display':'block'});
                        }
                        return false;
                    })
                    .keyup( function () {
                        // fire the above change event after every letter
                        $(this).change();
                    });
            }

            $(function () {
                filterList($(".geo-wrapper"));
            });
        }(jQuery));

    </script>


Код ищет везде не важно регион это или город, все верно, надо как то добавить логику такого характера:

Если не один город внутри региона и его название не совпадают с текстом введенным в поиск то скрываем полностью города и сам регион.


Как написать условие?
  • Вопрос задан
  • 489 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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