2

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

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

But this does not seem to work for autocomplete fields.

I tried making changes to the generated span tags that Django Autocomplete Light manages and can make it appear to select a value:

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

"XYZ" 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).

Is there a way to do this?

EDIT: Part of the group of HTML tags Autocomplete Light manages is a select tag like the following:

<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>

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 "XYZ") is not the primary key of "XYZ" in the options table in the database, it is created by AutoComplete Light.

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.

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.

For reference, here is the entire structure Autocomplete Light creates in HTML when a field is declared as autocomplete:

<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>
Saadi Toumi Fouad
  • 2,779
  • 2
  • 5
  • 18
Mustafamond77
  • 330
  • 2
  • 15
  • ""XYZ" now appears in the field, but when the form is submitted, it thinks nothing has been selected and submits null" yes because `.text("XYZ")` sets only the text of the select element only visualy but you need `.val("XYZ")` to set the value as well – Saadi Toumi Fouad Jul 28 '20 at 05:28
  • Thank you for your comment. Span tags cannot have a .val, though - see https://stackoverflow.com/questions/15953423/jquery-val-is-not-showing-value-of-span. I was setting the text and attributes for that span tag which is what causes the text to actually appear in the field. The presence of the text itself in the span tag is not enough for the form to think it's there. – Mustafamond77 Jul 28 '20 at 14:18
  • No I didn't mean the `` element, I meant the ` – Saadi Toumi Fouad Jul 28 '20 at 16:08
  • That was what I tried first, but there was no effect (sorry should have been more clear in the question). The select element is only a part of what Autocomplete light does - the actual text of what appears is in the span tags below the select element and the options within the select use an id (data-select2-id) not related to the primary for the record of the option displayed. – Mustafamond77 Jul 29 '20 at 19:22
  • *That was what I tried first*, nope I don't think so you have already said *this would be accomplished by `$("input-id").val("XYZ");`* and that's incorrect because you are missing the symbol `#` which stands for **ids** or it could be done using the name attribute `$("select[name='ac_options']").val("XYZ")` – Saadi Toumi Fouad Jul 29 '20 at 19:48
  • Yes, the example I used was incorrect, I left out the # (edited and fixed, thank you for pointing it out). However, I did not leave out the # in my code, and the problem persists. If you look further at the select tag, you will see it does have id="input_id". Like I said, just setting the value of this select does not affect the span tags where it seems Autocomplete Light does some of its magic. Doing the standard $("#id").val("X") has no effect on the autoselect like it would on a standard dropdown. – Mustafamond77 Jul 30 '20 at 18:01
  • @Mustafamond77 Did you ever figure this out? I'm struggling with the same thing. I'm assuming that the reason that `$("#id").val(x);` doesn't work is because the objects dynamically load. I'm wondering about something hacky like having it scroll down the list, although I don't think that's the right approach. I will post an answer if/when I figure it out, but if you already have, would appreciate an update. :) – Danny Sep 21 '20 at 15:17
  • 1
    @Danny unfortunately, there does not seem to be a way to do this. I had to dump autocomplete light and am using jquery ui autocomplete which works great - it's easy to set the value and you get alot of control over what is selected and when. Sorry I don't have a better answer. – Mustafamond77 Sep 22 '20 at 02:56
  • @Mustafamond77 Appreciate it all the same! I'll look into that other library. – Danny Sep 22 '20 at 13:11

1 Answers1

1

You can add an option as if it's a standard dropdown and then select it.

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')
}
Dante Bortone
  • 107
  • 5