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

我正在使用Django Autocomplete灯光处理表单中的一些字段。我需要在用户执行特定操作时自动设置字段的值。例如，如果用户选中表单中的某个框，我希望自动选择字段的选定值从占位符文本更改为我需要的值，而不必用户也单击自动搜索并自己选择该值。对于标准下拉列表或输入，这将通过

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

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

我尝试对Django Autocomplete Light管理的生成的跨度标记进行更改，使其看起来像是选择了一个值：

$("#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>

---------
选择权
XYZ

有一个data-select2-id，它的值似乎由Autocomplete Light内部管理-如果这些id号及其关联的选项在任何地方公开，将选项添加到具有正确data-select2-id的select标记中可能会起到作用。数字（上面示例中的26表示“XYZ”）不是数据库选项表中“XYZ”的主键，它是由AutoComplete Light创建的

我还尝试了设置select的值和span的组合-表单仍然认为在自动完成中并没有选择任何内容

不过，理想情况下，与其尝试破解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>

---------
选择权
XYZ
选择选项。。。

您可以像添加标准下拉列表一样添加选项，然后选择它

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

---

您可以添加一个选项，就像它是一个标准下拉列表一样，然后选择它

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

---

“XYZ”现在显示在字段中，但当提交表单时，它认为没有选择任何内容，并提交null“是”，因为

.text（“XYZ”）

仅在视觉上设置选择元素的文本，但您也需要

.val（“XYZ”）

来设置值谢谢您的评论。但是，Span标记不能有.val-请参阅。我正在为span标记设置文本和属性，这是导致文本实际出现在字段中的原因。span标记中文本本身的存在不足以让表单认为它在那里。不，我不是指

元素，我指的是

元素，例如

$（“#input_id”）.val（“XYZ”）

，这是我首先尝试的，但没有效果（对不起，问题应该更清楚）。select元素只是Autocomplete light功能的一部分-显示内容的实际文本在select元素下方的跨度标记中，select中的选项使用与主选项不相关的id（data-select2-id）来记录显示的选项。@Danny很遗憾，似乎没有办法做到这一点。我必须转储autocomplete light并使用jQueryUIAutoComplete，它工作得很好-设置值很容易，您可以控制选择的内容和时间。很抱歉，我没有更好的答案。“XYZ”现在显示在字段中，但提交表单时，它认为未选择任何内容，并提交null“是，因为

.text（“XYZ”）

仅在视觉上设置select元素的文本，但您也需要

.val（“XYZ”）

来设置值谢谢您的评论。但是，Span标记不能有.val-请参阅。我正在为span标记设置文本和属性，这是导致文本实际出现在字段中的原因。span标记中文本本身的存在不足以让表单认为它在那里。不，我不是指

元素，我指的是

元素，例如

$（“#input_id”）.val（“XYZ”）

，这是我首先尝试的，但没有效果（对不起，问题应该更清楚）。select元素只是Autocomplete light功能的一部分-显示内容的实际文本在select元素下方的跨度标记中，select中的选项使用与主选项不相关的id（data-select2-id）来记录显示的选项。@Danny很遗憾，似乎没有办法做到这一点。我必须转储autocomplete light并使用jQueryUIAutoComplete，它工作得很好-设置值很容易，您可以控制选择的内容和时间。对不起，我没有更好的答案。