jQuery. Autocomplete. Как обновить данные в виджете?


Плагин Autocomplete используется для быстрой подсказки пользователю вариантов ввода из определенного списка. Но в случае зависимости эти вариантов от других полей — обновление данных очень неочевидно. В этой статье — пример решения задачи.

Самый простой пример — это зависимость условных моделей авто от марки. Когда пользователь выбрал Марку «Mercedes» — в поле модель ему должны быть доступны модели именно этой марки. Когда выбрал «BMW» — соответственно — модели BMW.

Вариант ajax-подгрузки не рассматриваем в рамках статьи — т.к. он делает ну слишком много ненужных обращений к серверу. А ведь список формируется уже в момент выбора Марки и не изменяется, пока не изменится там самая марка.

На самом деле ответ занимает всего одну строку:

$('#target').autocomplete('option', { 'source': modelsList });

Если говорить коротко — то этот код обновляет список подсказок на целевом поле и делает его равным значению modelsList.

Как получить этот список — зависит от Вашей реализации — например, после изменения значения, от которого зависит список можно делать ajax-обращение на сервер и получать данные. К примеру:

$('#general').on('blur', function(e){
    e.preventDefault();
    var th = $(this) ; // создаем контекст на себя, т.к. $(this) внутри $.post будет иметь другое значение
    $.post(
        '/get-data',
        {'value' : th.val() }, // отправляем текущее значение
        function( response ){ // в ответе ждем JSON
            $('#target').autocomplete('option', { 'source': modelsList }) ; // сразу подставляем ответный JSON в целевое поле
        }
    );
    return false;
});

Не вдаваясь в глубины и различные варианты проблемы — это типичный пример решения задачи.

Надеюсь статья была Вам полезной. Удачи!


Добавить комментарий

Ваш адрес email не будет опубликован.