Как динамически установить значение светового поля автозаполнения django с помощью JQuery

Я использую Django Autocomplete Light для некоторых полей в моей форме. У меня есть необходимость автоматически устанавливать значение поля, когда пользователь выполняет определенное действие. Например, если пользователь устанавливает флажок в определенном поле в форме, я хочу, чтобы выбранное значение поля автовыбора изменилось с текста-заполнителя на нужное мне значение, при этом пользователю не нужно также щелкать автовыбор и выбирать значение самостоятельно. Для стандартного раскрывающегося списка или ввода это можно сделать с помощью

$("#input-id").val("XYZ");

Но это не работает для полей автозаполнения.

Я попытался внести изменения в сгенерированные теги span, которыми управляет Django Autocomplete Light, и могу заставить его выбрать значение:

$("#select2-input-id-container").attr("title", "XYZ").text("XYZ")

XYZ теперь отображается в поле, но когда форма отправляется, она считает, что ничего не выбрано, и отправляет null (или, если поле является обязательным, она просит пользователя выбрать значение).

Есть ли способ сделать это?

РЕДАКТИРОВАТЬ: часть группы тегов HTML, которыми управляет Autocomplete Light, представляет собой тег выбора, подобный следующему:

<select name="ac_options" data-placeholder="Choose Option..." tabindex="-1" class="modelselect2 form-control select2-hidden-accessible" required="" id="input_id" data-autocomplete-light-language="en" data-autocomplete-light-url="/options-autocomp/" data-autocomplete-light-function="select2" data-select2-id="input_id" aria-hidden="true"> 
   <option value="" selected="" data-select2-id="1">---------</option>
   <option value="An Option" data-select2-id="20">An Option</option>
   <option value="XYZ" data-select2-id="26">XYZ</option>
</select>

Существует data-select2-id, который, по-видимому, имеет значения, внутренне управляемые Autocomplete Light. select2-id может помочь. Число (26 в приведенном выше примере для XYZ) не является первичным ключом XYZ в таблице опций в базе данных, оно создается AutoComplete Light.

Я также попробовал комбинацию установки значения выбора, а также диапазона. Форма по-прежнему считает, что в автозаполнении ничего не выбрано.

В идеале, вместо того, чтобы пытаться взломать, как Django Autocomplete Light управляет множеством тегов, было бы неплохо иметь способ просто установить значение поля аналогично любому другому полю ввода.

Для справки, вот вся структура, которую Autocomplete Light создает в HTML, когда поле объявлено как автозаполнение:

<select name="input" data-placeholder="Choose Option..." tabindex="-1" class="modelselect2 form-control select2-hidden-accessible" required="" id="id_input" data-autocomplete-light-language="en" data-autocomplete-light-url="/input-autocomp/" data-autocomplete-light-function="select2" data-select2-id="id_input" aria-hidden="true"> 
  <option value="" selected="" data-select2-id="1">---------</option>
  <option value="An Option" data-select2-id="20">An Option</option>
  <option value="XYZ" data-select2-id="26">XYZ</option>
</select>
<span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" data-select2-id="2" style="width: 280px;">
  <span class="selection">
    <span class="select2-selection select2-selection--single modelselect2 form-control" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="3" aria-labelledby="select2-id_input-container">
      <span class="select2-selection__rendered" id="select2-id_input-container" role="textbox" aria-readonly="true">
        <span class="select2-selection__placeholder">Choose Option...</span>     
      </span>
      <span class="select2-selection__arrow" role="presentation">
        <b role="presentation"></b>
      </span>
    </span>
  </span>
  <span class="dropdown-wrapper" aria-hidden="true"></span>
  </span>

python django javascript jquery django-autocomplete-light
person Mustafamond77    schedule 28.07.2020    source источник
comment
XYZ теперь отображается в поле, но когда форма отправляется, она думает, что ничего не было выбрано, и отправляет null yes, потому что .text("XYZ") устанавливает только текст элемента выбора только визуально, но вам нужно .val("XYZ") также установить значение   -  person SaymoinSam    schedule 28.07.2020
comment
Спасибо за ваш комментарий. Однако теги Span не могут иметь .val - см. stackoverflow.com/questions/15953423/. Я устанавливал текст и атрибуты для этого тега span, из-за чего текст фактически появляется в поле. Присутствия самого текста в теге span недостаточно, чтобы форма подумала, что он там есть.   -  person Mustafamond77    schedule 28.07.2020
comment
Нет, я не имел в виду элемент <span>, я имел в виду элемент <select>, например $("#input_id").val("XYZ")   -  person SaymoinSam    schedule 28.07.2020
comment
Это было то, что я попробовал сначала, но эффекта не было (извините, в вопросе должно было быть более ясно). Элемент select — это только часть того, что делает Autocomplete light — фактический текст того, что появляется, находится в тегах span под элементом select, а параметры внутри select используют идентификатор (data-select2-id), не связанный с основным для запись отображаемой опции.   -  person Mustafamond77    schedule 29.07.2020
comment
Это было то, что я попробовал в первую очередь, нет, я не думаю, что вы уже сказали, что это будет выполнено с помощью $("input-id").val("XYZ");, и это неверно, потому что вам не хватает символа #, который стоит для идентификаторов или это можно сделать с помощью атрибута имени $("select[name='ac_options']").val("XYZ")   -  person SaymoinSam    schedule 29.07.2020
comment
Да, пример, который я использовал, был неверным, я пропустил # (отредактировано и исправлено, спасибо за указание). Однако я не пропустил # в своем коде, и проблема не устранена. Если вы посмотрите дальше на тег select, вы увидите, что он имеет id=input_id. Как я уже сказал, просто установка значения этого выбора не влияет на теги span, где кажется, что Autocomplete Light делает часть своего волшебства. Выполнение стандартного $(#id).val(X) не влияет на автовыбор, как на стандартный выпадающий список.   -  person Mustafamond77    schedule 30.07.2020
comment
@ Mustafamond77 Ты когда-нибудь это понимал? Я борюсь с тем же. Я предполагаю, что причина, по которой $("#id").val(x); не работает, заключается в том, что объекты загружаются динамически. Меня интересует что-то хакерское, например, прокрутка списка вниз, хотя я не думаю, что это правильный подход. Я опубликую ответ, если / когда выясню это, но если вы уже это сделали, был бы признателен за обновление. :)   -  person Danny    schedule 21.09.2020
comment
@ Дэнни, к сожалению, похоже, нет способа сделать это. Мне пришлось сбросить свет автозаполнения, и я использую автозаполнение jquery ui, которое отлично работает — легко установить значение, и вы получаете большой контроль над тем, что выбрано и когда. Извините, у меня нет лучшего ответа.   -  person Mustafamond77    schedule 22.09.2020
comment
@ Mustafamond77 Все равно ценю! Я загляну в эту другую библиотеку.   -  person Danny    schedule 22.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете добавить параметр, как если бы это был стандартный раскрывающийся список, а затем выбрать его.

function set_autocomplete_field( field_id, item_id, item_text ){
    var my_field = $('#' + field_id)
    var new_option = new Option(item_text, item_id, false, false);
    
    my_field.append(new_option)
    my_field.val(item_id).trigger('change')
}
person Dante Bortone    schedule 31.12.2020