Как получить значение только из выбора SuggestView без значения после срабатывания события change?

Question

Делаю калькулятор доставки с API Yandex.Карт. Есть такой код:

$(document).ready(function() {
    ymaps.ready(init);
  
    function init() {
        var suggestView = new ymaps.SuggestView('from', { boundedBy: [[45.474531, 33.054360],[68.246032, 179.798108]]}),
            fromInput = $('#from');

        suggestView.events.add('select', function (e) {
            var selectValue = e.get('item').value; 
            console.log(selectValue);
            onSearch(selectValue);
        });

        fromInput.on('change', function(){
            var value = $(this).val();
            console.log(value);
            onSearch(value);
        });

        function onSearch (point) { 
            // Дальше получение координат и остальной код
        }
    }
});

Сделал автодополнение на input, значение поля выбирается и работает как надо с помощью SuggestView, но при этом нужно получать значение поля при ручном вводе. Повесил еще обработчик change, но теперь, если ввести первую букву адреса и сделать выбор из автодополнения, то в значение поля попадает сначала одна буква, а затем уже весь выбранный адрес.

При этом, в калькуляторе сначала определяются координаты сначала для "М", а потом уже для "Россия, Москва". Подскажите, как можно это поправить?

Answer 1

В общем, лучше, чем добавить trigger в событие select и таймер в событие change ничего не придумал. Забыл еще добавить, что вызов метода stopPropagation в событии select не распространяется на исходные DOM-события.

Код, который получился:

$(document).ready(function() {
    ymaps.ready(init);
  
    function init() {
        var fromInput = $('#from'),
            suggestView = new ymaps.SuggestView('from', { boundedBy: [[45.474531, 33.054360],[68.246032, 179.798108]]});

        suggestView.events.add('select', function (e) {
            var selectValue = e.get('item').value; 
            // console.log(selectValue);
            fromInput.trigger('change'); // Добавил trigger
        });

        fromInput.on('change', function(evt){
            var _this = $(this);

            setTimeout(function(){ // Добавил таймер
                var value = _this.val();

                console.log(value);
                onSearch(value); // И уже из этого события передаю значение в функцию
                
            }, 1000);

        });

        function onSearch (point) { 
            // Дальше получение координат и остальной код
        }
    }
});

Правда не совсем то, что нужно. Т.к. при вводе первой буквы и выборе из select событие все равно срабатывает дважды, но уже с полным значением.

UPD: Написал этот ответ и меня осенило) Вот код, который работает как надо(Новые комменты *):

$(document).ready(function() {
    ymaps.ready(init);
  
    function init() {
        var fromInput = $('#from'),
            suggestView = new ymaps.SuggestView('from', { boundedBy: [[45.474531, 33.054360],[68.246032, 179.798108]]}),
            selectValue; //*Объявил переменую в общей обл. видимости для обоих обработчиков

        suggestView.events.add('select', function (e) {
            selectValue = e.get('item').value; 
            onSearch(selectValue); //*Тут передаю выбранное значение в функцию, при этом событие change не срабатывает
            
        });

        fromInput.on('change', function(evt){
            var _this = $(this);

            setTimeout(function(){ 
                var value = _this.val();

                if (value !== selectValue) 
                    onSearch(value); //*Добавил проверку совпадает ли значение intput со значеним выбраного селекта
                
            }, 1000);

        });

        function onSearch (point) { 
            // Дальше получение координат и остальной код
            console.log('point = '  + point);
        }
    }
});

БЛОГ НА HUSL

Как получить значение только из выбора SuggestView без значения после срабатывания события change?

Ответы (1 шт):