Форум

Copermaine · #1 (**permalink**) 16.11.2021, 11:21

Добрый день. Есть список select из динамически заполняющимися элементами option. К этому списку добавлен поиск, путем получения массива элементов, его фильтрации и возврата нового массива, который удовлетворяем условиям. Все хорошо, но есть одно НО, если в списке остается 1 элемент подскажите как получить его value?
Т.е если в поиске ввести "ха" в списке будет только Харьков, вот тут нужно получить его value чтоб на основе этого подгрузить улицы города.
Буду очень благодарен за помощь

https://codepen.io/Copermaine/pen/dyzQOEN?editors=1011

<input autofocus type="text" id="select_filter" placeholder="Введи текст для поиска" />
                         <select name="select" id="select_region" class="geo_select">
                              <option value="" hidden>Оберіть регіон</option>
                              <option value="1" >Харьков</option>
                              <option value="2" >Хмельницк</option>
                              <option value="3" >Хмарцизк</option>
                         </select>

const regionSelect = document.getElementById('select_region');
const regionFilter = document.getElementById('select_filter');
    const optionsArray = [...regionSelect.options];
    regionFilter.oninput = function(e) {
        const val = this.value.trim();
        const regexp = new RegExp(val, "ig");
        regionSelect.options.length = 0;
        optionsArray.forEach(elem =>{
            if (elem.innerText.search(regexp) !== -1){
                regionSelect.appendChild(elem);

            }
        })
    };

voraa · #2 (**permalink**) 16.11.2021, 11:35

regionSelect.options[0].value

Copermaine · #3 (**permalink**) 16.11.2021, 11:44

Сообщение от voraa

regionSelect.options[0].value

Это работает даже если в списке остаются 3 элемента, значение получаем первого в массиве, а мне нужно получить значение того, который выбран, как по onchange, но с учетом того что он 1 остался и onchange тут не срабатывает))

voraa · #4 (**permalink**) 16.11.2021, 14:22

А в какой момент надо получать
Можно проверять, что он 1 при вводе букв.
(Кстати, если случайно ввести не букву, а, например [ вместо х, то будет ошибка в регулярном выражении)
Если при щелчке по селекту, то можно на click.
regionSelect.options[regionSelect.selectedIndex].value

Copermaine · #5 (**permalink**) 16.11.2021, 15:52

Давайте расскажу что в целом должно быть, а вы мне возможно подскажите какой-то другой вариант решения.
Мне нужно реализовать поиск пока по городам, но далее он также будет и по улицам. Есть массив городов которые принадлежат области, и есть улицы принадлежащие конкретному городу.
Улиц у города будет много, и скролить не вариант, поэтому решили добавить поиск.
Исходя из этого я выбрал конструкцию select-option так как она дает возможность каждому option присвоить текст и value, по которому отрисовывается следующая ступень, я создаю option и заполняю его данными из масcиива при помощи js далее заполняю этими option select в HTML ну и вижу список на страничке. Вот при поиске для того чтоб мне отрисовать следующую ступень принадлежности, нужно получить value выбранного элемента, а в моей реализации я его получить не могу))) Т.е мне нужно значение получить когда я кликаю по option если он один отобразился в select.

voraa · #6 (**permalink**) 16.11.2021, 17:47

Какой то натянутый интерфейс.
Если вам нужен только тогда, когда 1, то зачем кликать? Это лишнее действие. Просто при поиске проверяйте количество найденных и берите его, если остался только один. Да и зачем тогда селект. Просто в списке искать и показывать, когда один остался.
А почему только один?
Допустим осталось в селекте 3 или 5 или 10, и человек видит то, что ему нужно, почему он не может кликнуть по нужному и не вводить дальше.

В любом случае событие 'click' даст нужный элемент

<body>
<input autofocus type="text" id="select_filter" placeholder="Введи текст для поиска" />
                         <select name="select" id="select_region" class="geo_select">
                              <option value="" hidden>Оберіть регіон</option>
                              <option value="1" >Харьков</option>
                              <option value="2" >Хмельницк</option>
                              <option value="3" >Хмарцизк</option>
                         </select>
<script>
const regionSelect = document.getElementById('select_region');
const regionFilter = document.getElementById('select_filter');

    const optionsArray = [...regionSelect.options];
    
    regionFilter.oninput = function(e) {
        const val = this.value.trim();
        const regexp = new RegExp(val, "ig");
        regionSelect.options.length = 0;
        optionsArray.forEach(elem =>{
            if (elem.innerText.search(regexp) !== -1){
                regionSelect.appendChild(elem);
 
            }
        })
    };
    regionSelect.addEventListener('click', () => {
		console.log (regionSelect.options[regionSelect.selectedIndex].value)
    })

</script>
</body>

voraa · #7 (**permalink**) 16.11.2021, 17:54

Можно еще рассмотреть использование элемента <datalist>

Copermaine · #8 (**permalink**) 16.11.2021, 18:11

Если в селекте остается больше 1 оптиона, то ту без проблем срабатывает onchange, а когда один нет изменения, onchange не работает.
Событие по клику работает, но не полностью, предположил пользователь в инпут ввел 'хар' а дальше кликать по селекту не хочет.
<datalist> пробую.

voraa · #9 (**permalink**) 16.11.2021, 18:27

Сообщение от Copermaine

предположил пользователь в инпут ввел 'хар' а дальше кликать по селекту не хочет.

Но это вы должны продумать интерфейс. Что происходит, когда пользователь что то делает или не делает.
Это вы должны продумать должен ли пользователь кликать, если остался только один элемент.

Форум

Справочник

Discord чат

Курсы javascript