title: How to set the value of a django autocomplete light field dynamically using JQuery
body: <p>I am using Django Autocomplete Light for some fields in my form.  I have the need to automatically set the value of the field when the user performs a specific action.  For example, if the user checks a certain box in the form, I want the selected value of the autoselect field to change from the placeholder text to the value I need without the user having to also click the autoseelct and select the value themselves.  For a standard dropdown or input, this would be accomplished by</p>
  <pre><code>$(&quot;#input-id&quot;).val(&quot;XYZ&quot;);
  </code></pre>
  <p>But this does not seem to work for autocomplete fields.</p>
  <p>I tried making changes to the generated span tags that Django Autocomplete Light manages and can make it appear to select a value:</p>
  <pre><code>$(&quot;#select2-input-id-container&quot;).attr(&quot;title&quot;, &quot;XYZ&quot;).text(&quot;XYZ&quot;)
  </code></pre>
  <p>&quot;XYZ&quot; now appears in the field, but when the form is submitted, it thinks nothing has been selected and submits null (or if the field is required, it asks the user to select a value).</p>
  <p>Is there a way to do this?</p>
  <p>EDIT:
  Part of the group of HTML tags Autocomplete Light manages is a select tag like the following:</p>
  <pre><code>&lt;select name=&quot;ac_options&quot; data-placeholder=&quot;Choose Option...&quot; tabindex=&quot;-1&quot; class=&quot;modelselect2 form-control select2-hidden-accessible&quot; required=&quot;&quot; id=&quot;input_id&quot; data-autocomplete-light-language=&quot;en&quot; data-autocomplete-light-url=&quot;/options-autocomp/&quot; data-autocomplete-light-function=&quot;select2&quot; data-select2-id=&quot;input_id&quot; aria-hidden=&quot;true&quot;&gt; 
     &lt;option value=&quot;&quot; selected=&quot;&quot; data-select2-id=&quot;1&quot;&gt;---------&lt;/option&gt;
     &lt;option value=&quot;An Option&quot; data-select2-id=&quot;20&quot;&gt;An Option&lt;/option&gt;
     &lt;option value=&quot;XYZ&quot; data-select2-id=&quot;26&quot;&gt;XYZ&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  <p>There is a data-select2-id that seems to have values internally managed by Autocomplete Light - if there is any place these id numbers and the options to which they are associated are exposed, adding the options to the select tag with the right data-select2-id might do the trick.  The number (26 in the example above for &quot;XYZ&quot;) is not the primary key of &quot;XYZ&quot; in the options table in the database, it is created by AutoComplete Light.</p>
  <p>I also tried a combination of the setting the value of the select as well as the span - The form still thinks there is nothing selected in the autocomplete.</p>
  <p>Ideally, though, instead of trying to hack how Django Autocomplete Light manages it's many tags, it would be nice to have a way to just set the value of the field similarly to any other input field.</p>
  <p>For reference, here is the entire structure Autocomplete Light creates in HTML when a field is declared as autocomplete:</p>
  <pre><code>&lt;select name=&quot;input&quot; data-placeholder=&quot;Choose Option...&quot; tabindex=&quot;-1&quot; class=&quot;modelselect2 form-control select2-hidden-accessible&quot; required=&quot;&quot; id=&quot;id_input&quot; data-autocomplete-light-language=&quot;en&quot; data-autocomplete-light-url=&quot;/input-autocomp/&quot; data-autocomplete-light-function=&quot;select2&quot; data-select2-id=&quot;id_input&quot; aria-hidden=&quot;true&quot;&gt; 
    &lt;option value=&quot;&quot; selected=&quot;&quot; data-select2-id=&quot;1&quot;&gt;---------&lt;/option&gt;
    &lt;option value=&quot;An Option&quot; data-select2-id=&quot;20&quot;&gt;An Option&lt;/option&gt;
    &lt;option value=&quot;XYZ&quot; data-select2-id=&quot;26&quot;&gt;XYZ&lt;/option&gt;
  &lt;/select&gt;
  &lt;span class=&quot;select2 select2-container select2-container--default select2-container--focus&quot; dir=&quot;ltr&quot; data-select2-id=&quot;2&quot; style=&quot;width: 280px;&quot;&gt;
    &lt;span class=&quot;selection&quot;&gt;
      &lt;span class=&quot;select2-selection select2-selection--single modelselect2 form-control&quot; role=&quot;combobox&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; tabindex=&quot;3&quot; aria-labelledby=&quot;select2-id_input-container&quot;&gt;
        &lt;span class=&quot;select2-selection__rendered&quot; id=&quot;select2-id_input-container&quot; role=&quot;textbox&quot; aria-readonly=&quot;true&quot;&gt;
          &lt;span class=&quot;select2-selection__placeholder&quot;&gt;Choose Option...&lt;/span&gt;     
        &lt;/span&gt;
        &lt;span class=&quot;select2-selection__arrow&quot; role=&quot;presentation&quot;&gt;
          &lt;b role=&quot;presentation&quot;&gt;&lt;/b&gt;
        &lt;/span&gt;
      &lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;dropdown-wrapper&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;/span&gt;
  </code></pre>