Некорректное отображение списка select после фильтрации
 

Здравствуйте!

Есть на странице элемент select. Я в него сразу загружаю все данные, и потом фильтрую от ввода пользователя.
После фильтрации, выпадающий список в хроме и опере отображает только один элемент, вместо списка в 20 штук.

Код фильтра.

$(document).ready(function () {
                $('#ShippingNewAddress_City').keyup(function () {

                    // Search text
                    var text = $(this).val();

                    // Hide all content class element
                    $('.CityNP').hide();
                 
                    // Search and show
                    
                    // Search and show
                    $('.CityNP:contains("г. ' + text + '")').show();
                });
            });

Отображение списка без фильтра



Отфильтрованный список

При данной фильтрации, список содержит более 200 строк, по одной строке просматривать будет не вариант совсем.

WebMorda,
попробуйте сделать макет, и можно подробнее что ввели

WebMorda,
select быстрый выбор

Макет?
Вы имеете ввиду код select?

<select class="ShipMethodNP" name="address_attribute_3" id="address_attribute_3">
<option value="0">---</option>
<option class="CityNP" value="15">Отделение №1: ул. М. Грушевского, 3. г. Заболотов (Снятинский р-н)</option>
<option class="CityNP" value="16">Отделение №1: ул. Суворова, 62. г. Березанка(Николаевская обл.)</option>
<option class="CityNP" value="17">Отделение № 1: ул. Колгоспная, 19. г. Низы</option>
<option class="CityNP" value="18">Отделение: ул. Ярослава Мудрого, 24. г. Бахмач</option>
<option class="CityNP" value="19">Отделение №1: ул. Леси Украинки, 2. г. Печенежин</option>
<option class="CityNP" value="20">Отделение: ул. Гоголя, 4. г. Миргород</option>
<option class="CityNP" value="21">Отделение №1: ул. Соборная, 34. г. Уланов</option>
<option class="CityNP" value="22">Отделение №1: ул. Маяковского, 8. г. Турбов</option>
<option class="CityNP" value="23">Отделение: ул. Центральная, 76. г. Новые Санжары</option>
<option class="CityNP" value="24">Отделение №1: ул. Мицкевича, 9. г. Жидачов</option>
<option class="CityNP" value="25">Отделение №1: ул. Космонавтов, 50а. г. Дружковка</option>
<option class="CityNP" value="26">Отделение №1: ул. Чехова, 1а. г. Покров</option>
<option class="CityNP" value="27">Отделение №1: ул. Ленина, 1/4. г. Старый Острополь</option>
<option class="CityNP" value="28">Отделение № 1: ул. Комсомольская, 20. г. Песчаный Брод</option>
<option class="CityNP" value="29">Отделение № 1: ул. Ленина, 11а. г. Браилов</option>
<option class="CityNP" value="30">Отделение №1: ул. Интернациональная, 20а. г. Зарванцы</option>
<option class="CityNP" value="31">Отделение № 1: ул. 50-летия Октября, 25. г. Летичев</option>
<option class="CityNP" value="32">Отделение №1: ул. Независимости, 3. г. Заболотье (Волынская обл.)</option>
<option class="CityNP" value="33">Отделение №1: ул. Ленина, 23. г. Вороновица</option>
<option class="CityNP" value="34">Отделение №1: ул. Смавзюка, 34. г. Джурин (Шаргородский р-н)</option>
<option class="CityNP" value="35">Отделение №1: ул. 50-летия Октября, 5. г. Цекиновка</option>
<option class="CityNP" value="36">Отделение №1: ул. Мира, 75а. г. Ладан</option>

и т.д. их более 3800 строк.

Я ввел название города, в данном случае Киев. Фильтр идет по городам, которые в конце строки указаны.

Я проверял в мозиле и edge, там нормально он раскрывает список.

WebMorda,
смотрите ссылку в посте №3

Сейчас пытаюсь прикрутить пример.

Я делаю его без формы

var f = document,
                s = f["address_attribute_3"], o = s.querySelectorAll("option"),
                inp = f["ShippingNewAddress.City"],
                reg;
            inp.oninput = function () {
                reg = new RegExp(this.value, "ig");  //если искать только в начале  "^" + this.value, "ig"
                s.options.length = 0;
                for (var i = 0; i < o.length; i++) {
                    reg.test(o[i].text) && s.options.add(o[i]);
                    reg.lastIndex = 0;
                }
            };

ругается на o = s.querySelectorAll("option")

Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined

он и тегом form не хочет работать. не находит select с моим именем

jquery: быстрый поиск в select
 

WebMorda,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var s = document.querySelector('#address_attribute_3'), reg,  o = s.querySelectorAll("option")  ;
$('#ShippingNewAddress_City').on('input', function() {
    reg = new RegExp(this.value, "ig");  //если искать только в начале  "^" + this.value, "ig"
    s.options.length = 0;
    for (var i=0; i<o.length; i++)  {
       reg.test(o[i].text) && s.options.add(o[i]);
       reg.lastIndex = 0;
    }
})
});
  </script>
</head>

<body>
<select class="ShipMethodNP" name="address_attribute_3" id="address_attribute_3" size="30">
<option value="0">---</option>
<option class="CityNP" value="15">Отделение №1: ул. М. Грушевского, 3. г. Заболотов (Снятинский р-н)</option>
<option class="CityNP" value="16">Отделение №1: ул. Суворова, 62. г. Березанка(Николаевская обл.)</option>
<option class="CityNP" value="17">Отделение № 1: ул. Колгоспная, 19. г. Низы</option>
<option class="CityNP" value="18">Отделение: ул. Ярослава Мудрого, 24. г. Бахмач</option>
<option class="CityNP" value="19">Отделение №1: ул. Леси Украинки, 2. г. Печенежин</option>
<option class="CityNP" value="20">Отделение: ул. Гоголя, 4. г. Миргород</option>
<option class="CityNP" value="21">Отделение №1: ул. Соборная, 34. г. Уланов</option>
<option class="CityNP" value="22">Отделение №1: ул. Маяковского, 8. г. Турбов</option>
<option class="CityNP" value="23">Отделение: ул. Центральная, 76. г. Новые Санжары</option>
<option class="CityNP" value="24">Отделение №1: ул. Мицкевича, 9. г. Жидачов</option>
<option class="CityNP" value="25">Отделение №1: ул. Космонавтов, 50а. г. Дружковка</option>
<option class="CityNP" value="26">Отделение №1: ул. Чехова, 1а. г. Покров</option>
<option class="CityNP" value="27">Отделение №1: ул. Ленина, 1/4. г. Старый Острополь</option>
<option class="CityNP" value="28">Отделение № 1: ул. Комсомольская, 20. г. Песчаный Брод</option>
<option class="CityNP" value="29">Отделение № 1: ул. Ленина, 11а. г. Браилов</option>
<option class="CityNP" value="30">Отделение №1: ул. Интернациональная, 20а. г. Зарванцы</option>
<option class="CityNP" value="31">Отделение № 1: ул. 50-летия Октября, 25. г. Летичев</option>
<option class="CityNP" value="32">Отделение №1: ул. Независимости, 3. г. Заболотье (Волынская обл.)</option>
<option class="CityNP" value="33">Отделение №1: ул. Ленина, 23. г. Вороновица</option>
<option class="CityNP" value="34">Отделение №1: ул. Смавзюка, 34. г. Джурин (Шаргородский р-н)</option>
<option class="CityNP" value="35">Отделение №1: ул. 50-летия Октября, 5. г. Цекиновка</option>
<option class="CityNP" value="36">Отделение №1: ул. Мира, 75а. г. Ладан</option>
</select>
<input type="text" id="ShippingNewAddress_City">

</body>
</html>

На отдельной странице работает замечательно, на сайте не реагирует на ввод текста. Благодарю за помощь, будем разбираться с сайтом.

WebMorda,
вероятно вот в это и надо добавить код, а не в ready