Question

我在表单中的某些字段上使用了Django Autocomplete Light。当用户执行特定操作时，我需要自动设置字段的值。例如，如果用户选中表单中的某个框，则我希望自动选择字段的选定值从占位符文本更改为所需的值，而无需用户也单击自动选择并自己选择值。对于标准的下拉菜单或输入，这可以通过

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

但这似乎不适用于自动完成字段。

我尝试对Django Autocomplete Light管理的生成的span标签进行更改，并且可以使其看起来像选择一个值：

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

“ XYZ”现在出现在该字段中，但是在提交表单时，它认为没有选择任何内容并提交null（或者如果需要该字段，它会要求用户选择一个值）。

有没有办法做到这一点？

编辑： Autocomplete Light管理的HTML标签组的一部分是一个选择标签，如下所示：

<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内部管理的值-如果在任何地方这些ID编号及其关联的选项都暴露在外，则将这些选项添加到select标记中正确的data-select2-id可能会解决问题。数字（上面示例中的“ XYZ”为26）不是数据库选项表中“ 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>

Answer 1

您可以像标准下拉菜单一样添加一个选项，然后选择它。

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')
}

如何使用JQuery动态设置Django自动完成光场的值

1 个答案: