0

Проблема с Jquery Autocomplete при заполнении нескольких полей

Необходимо сделать скрипт автозаполения полей input когда пользователь вводит адрес.

Для этого написал php-скрипт, который используя REST API сервиса Ahunter.ru (http://ahunter.ru/site/doc/api/suggest/address), собирает подсказки для вводимого пользователем адреса, обрабатывает их и формирует массив в формате JSON, для его последующей обработки Jquery Autocomplete

Проблемы возникли при написании скрипта на Jquery для ajax-запроса к php-скрипту. Код скрипта на Jquery:

<script type="text/javascript">

 $('.address').each(function(){

$(this).autocomplete({ source: function(request,response) {
    
 var val =  $('.address').val();

    
    $.getJSON('http://doc.army-help.ru/files/1.php?query=' + val,  function(data){
         
        var suggestions = []; // массив для хранения результатов
        $.each(data, function(key, val) {
                     
                suggestions.push(val.value); // добавляем все элементы
            });
            response(suggestions);
        });
    
    }     
});


});

</script>

Скрипт работает, но проблема заключается в том, что для обработки нескольких полей с классом address на странице используется функция .each. При этом обрабатываются все поля, но данные для переменной val (в нее помещается введенные пользователем данные) берутся только из 1-го по порядку класса address.

!!! ВОПРОС:

Не понимаю как заполнять переменную val содержанием именно того input, который заполняет пользователь. Пробовал варианты - var val = $(this).val(); и var val = this.value; но они не работают.

Адрес php-скрипта - http://doc.army-help.ru/files/1.php?query=%D0%BD%D0%B8%D0%B6%D0%BD%D0%B8%D0%B9

Адрес страницы с ajax-скриптом - http://doc.army-help.ru/files/2.php

1 ответ 1

0

Решение найдено:

https://qna.habr.com/q/930571

В данном случае обходить все поля неправильно, each тут не помощник. Правильно будет отслеживать ввод данных в поле и тут же обрабатывать из него данные:

$('body').on('keyup', '.address', function(){
 var item = $(this);
item.autocomplete({ source: function(request,response) {
 var val = item.val();
 $.getJSON('http://doc.army-help.ru/files/1.php?query=' + val,  function(data){
        
        var suggestions = []; // массив для хранения результатов
        $.each(data, function(key, val) {
                    
                suggestions.push(val.value); // добавляем все элементы
            });
            response(suggestions);
        });
            
  }     
});
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.