autocomplete.ModelSelect2 () not working in bootstrap5 modal

[sasikumar1978k]

form.py

class STAFFCOUNTDETForm(forms.ModelForm):

    class Meta:
       -----
        widgets = {
            'POSTGODATE': forms.DateInput(attrs={'class': 'form-control', 'type': 'date'}),

            'Office_Code': autocomplete.ModelSelect2(
                url='get_office_code_view', 
                attrs={
                 'data-placeholder': '--Select--',
                'data-minimum-input-length': 0,
                'data-dropdown-parent': '#modal-book',  # Set the dropdown parent
                'data-width': '100%',  # Set the width to 100%
                # Only trigger autocompletion after 3 characters have been typed
                # 'style': 'width: 100%;'  # Set the width to 100%

            },),

            'DESIGNAME': autocomplete.ModelSelect2(
                url='get_postnames_view', 
                attrs={
                # Set some placeholder
                'data-dropdown-parent': '#modal-book',
                'data-width': '100%',
                'data-minimum-input-length': 0,
                'data-placeholder': '--Select--',
                # Only trigger autocompletion after 3 characters have been typed
                'style': 'width: 100%;'  # Set the width to 100%

            },),

            'DESIGSUBJECT': autocomplete.ModelSelect2(
                url='get_postsubjects_view', 
                forward=['DESIGNAME'],
                attrs={
                # Set some placeholder
                'data-placeholder': '--Select--',
                # Only trigger autocompletion after 3 characters have been typed
                'data-minimum-input-length': 0,
                'style': 'width: 100%;' , # Set the width to 100%
               'data-placeholder': 'Select Choice',
                    'data-dropdown-parent': '#modal-book',
                    'data-width': '100%',

                    'data-minimum-input-length': 0,
            },),

        }

Modal

<div class="modal fade" id="modal-book" data-bs-keyboard="false" data-bs-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">

    </div>
  </div>
</div>

js

  const modal = document.getElementById('modal-book')

  modal.addEventListener('shown.bs.modal', () => {
    console.log('modal element completely visible!');
    yl.registerFunction('select2', function ($, element) {
      var $element = $(element);
      alert($element);
      // autocomplete function here
    });

  })

[jpic]

Apparently the autocomplete was not initialized at all there, the JS you're trying to use is the one to register a custom init function, not to trigger initialization. Initialization is supposed to trigger itself automatically but for some reason not here.