Установка переключателя на основе значения автозаполнения jquery

Question

У меня есть форма, которую директора заполняют, когда они добавляют событие в мою базу данных. Поскольку определенный тип события может происходить более одного раза, я стараюсь сделать его максимально легким для них. Используя автозаполнение, я получаю текстовые значения для работы просто отлично. Возникли проблемы с переключателями.

Пример: доступно 3 типа форматов - гандикап, скретч или оба. Гандикап - это значение 1, царапина - это значение 2, а оба - значение 3. Я могу добавить правильное значение в таблицу, когда они впервые вводят свое событие. Как установить переключатель, который соответствует (format_1 для гандикапа, format_2 для нуля, format_3 для обоих), используя автозаполнение?

 $('#format').val(ui.item.f); 

вернет значение из таблицы, если я использую текст вместо переключателя

Я попытался создать переменную (т.е. var f = $ (". Format"). Val ();), которая не работала. Я думал о том, чтобы что-то похожее на установку переменной (например, f), которая установила бы переключатель (например, format_f = флажок), но не смогла понять, как ее механизировать. Мне не удалось найти какое-либо направление из моих книг или в Интернете.

Может кто-нибудь указать мне правильное направление?

Answer 1

Вам необходимо добавить это в функцию select вашего автозаполнения. Возможно, в вашем экземпляре автозаполнения его нет, так как он не нужен для поведения по умолчанию.

Очевидно, вам необходимо иметь сопоставление доступных опций и форматов автозаполнения, и вы можете отправить его обратно всем, кто генерирует данные автозаполнения. (В вашем примере неясно, является ли автозаполнение AJAX или локальным, но это не имеет значения.)

В конечном итоге вы хотите, чтобы в вашем автозаполнении были такие записи:

[ { "id":"foo", "value":"bar", "f":"1" },
  { "id":"baz", "value":"quux", "f":"2" } ]

Тогда ваша функция выбора в конце автозаполнения будет выглядеть так:

select: function(event, ui) {
    if (ui.item) {
        $('#format').val(ui.item.f);
    }
}

Я написал полный пример в похожем вопросе несколько дней назад.