Как правильно сделать выбор региона из базы данных при вводе названия в поле?

Question

[Ankozar]

Вопрос кривой, но я просто не знаю, как правильно это называется.

Суть:


Юзер выбирает регион. Начинает вводить название в поле, аяксом ищу нужное значение в БД.

У меня сейчас код такой:

<input list='inputRegion' class="inputRegion">
<datalist id='inputRegion'>
</datalist>

$('input.inputRegion').keyup(function(e) {
    //console.log(e.which);
    if(e.which != 32){
        $("#inputRegion").empty();
        chooseRegion();
    };
});

function chooseRegion() {
    $.ajax({
            type: 'POST',
            url: 'php/chooseRegion.php',
            data: {chooseRegion: $("input.inputRegion").val()},
            success: function (response) {
                var result = $.parseJSON(response);
                $("#inputRegion").append("<option value='" + result + "'>");
                // console.log(result);
            }
        });
}

Вопросов три.
1. Правильно ли выбраны html-тэги? Имею в виду, что это input.list + datalist. Может, select нужен?
2. Правильная реализация? Или как-то по-другому это делается?
3. Как поймать выбор, когда юзер нажмёт на нужный регион? (тут он один пока, но их куча будет).

Comments

[Сергей]

Лучше собрать список регионов сразу и не дергать сервер на каждое нажатие кнопки. Засунуть этот список в select
Плюс как-то закешировать его. Регионы то почти никогда не меняются в стране

[Ankozar]

Сергей, штука в том, что их много. И, возможно, потом будет СНГ. Я подумал что проще не делать разделение по странам. А в одном поле, от ввода, выбрать юзеру нужный регион. Искать его сразу во всех странах.

А то листать списки долго, на мой взгляд.

Вроде надо просто задержку запроса поставить, чтобы он не по одной букве искал, а чуть подождал, дал юзеру побольше символов ввести.

[Сергей]

Их много, но они не меняются никогда. Добавите СНГ и сбросите кеш.
Для поиска можно использовать кастомный селекст со строкой поиска

[Ankozar]

Сергей

кастомный селекст со строкой поиска

Это какой тег, не подскажите?
Просто селект не даёт вводить данные.

[Сергей]

Ankozar, Тут можно посмотреть ответы Поиск по select?

Answer 1

[Vladislav Orlov]

Правильно ли выбраны html-тэги? Имею в виду, что это input.list + datalist. Может, select нужен?

У инпута тег "list" избыточен, его необходимо убрать. datalist заменить на select.
---
Реализация нормальная, но если хотите заморочится - можно отправлять запрос только в момент когда юзер перестал печатать. Что подобное обсуждается тут - Как сделать ajax поиск с keyup задержкой для уменьшения нагрузки? / https://learn.javascript.ru/task/debounce
---
Выбор поймать так же как и в инпуте.
Только если вы в инпуте ловите ивент keyup, то в select будет change\onchange https://www.google.com/search?q=onchange+select+ev...

Comments

[Ankozar]

Как же это окуенно, когда чему-то научился!

В этот раз, разобрался с setTimeout и получше понял return.

Крутил-вертел, читал и вот (это ещё без отлова выбора, конечно):

let switcher = true;
$('#inputRegion').keyup(function(e) {
    if($(this).val().length > 2){
        delay(chooseRegion, 3000);
    };
});

/////////////////////////////////////////
//Функции
/////////////////////////////////////////

function chooseRegion() {
        $('#inputRegionResult').empty();
        $.ajax({
                type: 'POST',
                url: 'php/chooseRegion.php',
                data: {chooseRegion: $("#inputRegion").val()},
                success: function (response) {
                    var result = $.parseJSON(response);
                    $("#inputRegionResult").append("<span>" + result + "</span><br>");
                    // console.log(result);
                }
            });
}

function delay (fn, delay){
    if(switcher === true){
        fn();
        switcher = false;
        console.log('запустили');
    } else {
        console.log('ждём-с');
        return
    };
    setTimeout(() => switcher = true, delay);
};

Работает, сцуко!

Кое-что надо докурить, конечно. Но там я уже знаю.

Спасибо вам за подсказки, в общем.

[Vladislav Orlov]

function chooseRegion() {
            console.log('send request to somewhere..')
            return true;
        }


        let timeoutInput;
        $('#inputRegion').keyup(function(e) {

            clearInterval(timeoutInput);
            console.log('request was cancelled');

            if($(this).val().length > 2){
                timeoutInput = setInterval(function () {
                	chooseRegion();
                	clearInterval(timeoutInput);
                }, 3000);
            }
        });

Можно было чуть по проще написать, ну ладно)