x-editable + select2 + ajax submit work with no results found in search box (or not click any item from list)

[oawebdev]

Hello. I have this code:

<a href="" data-name="parent_id" data-type="select2" data-pk="66" data-url="/update_ajax" data-value="6" data-title="Оберіть корпус" data-source="/categories" data-placeholder="Оберіть корпус" class="update-select editable editable-click" style="">Text</a>

$('.update-select').editable({
        tpl: '<select></select>',
        mode: 'inline',
         select2: {
            ajax: {
              data: function (params) {
                var query = {
                  term: params.term,
                  type: 'query'
                }
                return query;
              }
            },            
            dropdownParent: '.editable-inline', 
            width: '200px',
            theme: 'bootstrap4'
          },
          display: function(value, response) {
            //return false;   //disable this method
          },
            success: function (response, newValue) {
              $(this).text(response.title);
              if(response.statusCode == 500) return response.msg;             
            }
      });

When I try to search non existing value and click submit button it send empty data to server.

When I use array for source it works fine, because in this situation I have data in input and .select2-selection__rendered and it submited to server.

The problem is that when ajax source enabled it use select tag without option before you choose one.

<select data-select2-id="152" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true"></select>

after choose

<select data-select2-id="191" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
<option value="66" data-select2-id="207">nmbmnbmn</option>
</select>

with array source you have input with value

<input type="hidden" value="66" data-select2-id="289" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">

Also .select2-selectionrendered didn't get data from x-editable and use placeholder to set text for .select2-selectionplaceholder.

Array source:

<input type="hidden" value="1" data-select2-id="273" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
...
<span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-disabled="false" aria-labelledby="select2-7mp8-container" aria-owns="select2-7mp8-results" aria-activedescendant="select2-7mp8-result-0eca-68">
<span class="select2-selection__rendered" id="select2-7mp8-container" role="textbox" aria-readonly="true" **title="nmbmnbmn">nmbmnbmn**</span>
<span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
</span>

Ajax source:

<span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-disabled="false" aria-labelledby="select2-xt0e-container" aria-owns="select2-xt0e-results">
<span class="select2-selection__rendered" id="select2-xt0e-container" role="textbox" aria-readonly="true">
<span class="select2-selection__placeholder">**Оберіть корпус**</span></span>
<span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span>

So in 'array mode' it use current data for submit it. In ajax it has no data before choose one, and if not it submit empty.

1 Solution: is to disable submit button if no option found. 2 Solution: set current data from as option. Placeholder will be not needed.

How can I do this?

UPD This problem can be found if you just open select box and click submit. As I understand in ajax mode select2 didn't get data-value (or value: ). How to fix it?

Found some solution here https://select2.org/programmatic-control/add-select-clear-items#preselecting-options-in-an-remotely-sourced-ajax-select2 How to implement it in my code?

UPD2 Found easy solution. Just add validate for empty values.

validate: function(value) {
          var value = $.trim(value);
          if(value == '') {
            return 'Choose one';
          } 
        },

The problem with placeholder still exists. How to put in placeholder current data?