Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.04.2017, 21:39
Новичок на форуме
Отправить личное сообщение для WebMorda Посмотреть профиль Найти все сообщения от WebMorda
 
Регистрация: 22.07.2016
Сообщений: 6

Некорректное отображение списка 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 строк, по одной строке просматривать будет не вариант совсем.
Ответить с цитированием
  #2 (permalink)  
Старый 03.04.2017, 22:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

Сообщение от WebMorda
После фильтрации, выпадающий список в хроме и опере отображает только один элемент, вместо списка в 20 штук.
Ответить с цитированием
  #3 (permalink)  
Старый 03.04.2017, 22:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

WebMorda,
select быстрый выбор
Ответить с цитированием
  #4 (permalink)  
Старый 03.04.2017, 22:34
Новичок на форуме
Отправить личное сообщение для WebMorda Посмотреть профиль Найти все сообщения от WebMorda
 
Регистрация: 22.07.2016
Сообщений: 6

Сообщение от рони Посмотреть сообщение
WebMorda,
попробуйте сделать макет, и можно подробнее что ввели
Макет?
Вы имеете ввиду код 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, там нормально он раскрывает список.
Ответить с цитированием
  #5 (permalink)  
Старый 03.04.2017, 23:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

WebMorda,
смотрите ссылку в посте №3
Ответить с цитированием
  #6 (permalink)  
Старый 03.04.2017, 23:21
Новичок на форуме
Отправить личное сообщение для WebMorda Посмотреть профиль Найти все сообщения от WebMorda
 
Регистрация: 22.07.2016
Сообщений: 6

Сообщение от рони Посмотреть сообщение
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
Ответить с цитированием
  #7 (permalink)  
Старый 03.04.2017, 23:37
Новичок на форуме
Отправить личное сообщение для WebMorda Посмотреть профиль Найти все сообщения от WebMorda
 
Регистрация: 22.07.2016
Сообщений: 6

он и тегом form не хочет работать. не находит select с моим именем
Ответить с цитированием
  #8 (permalink)  
Старый 04.04.2017, 00:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 04.04.2017 в 00:32.
Ответить с цитированием
  #9 (permalink)  
Старый 04.04.2017, 11:50
Новичок на форуме
Отправить личное сообщение для WebMorda Посмотреть профиль Найти все сообщения от WebMorda
 
Регистрация: 22.07.2016
Сообщений: 6

На отдельной странице работает замечательно, на сайте не реагирует на ввод текста. Благодарю за помощь, будем разбираться с сайтом.
Ответить с цитированием
  #10 (permalink)  
Старый 04.04.2017, 11:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

WebMorda,
вероятно
Сообщение от WebMorda
загружаю все данные
вот в это и надо добавить код, а не в ready
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AJAX + Firefox некорректное отображение checkbox shu7 Firefox/Mozilla 2 26.06.2015 14:23
НЕКОРРЕКТНОЕ ОТОБРАЖЕНИЕ МОДУЛЯ В IE despol1ment jQuery 1 22.07.2013 22:45
Некорректное отображение форума в браузерах Chrome и Safari Magneto Сайт Javascript.ru 3 25.11.2010 11:06
Плагин JqGrid. Некорректное отображение таблиц и диалогов. skalka jQuery 0 12.08.2010 08:51
Некорректное отображение ссылок и бэкграундов в пунктах меню Lex4e Общие вопросы Javascript 4 13.02.2010 04:06