[SOLVED] SweetAlert2 with Autocomplete feature of JQuery UI

SweetAlert2 with Autocomplete feature of JQuery UI

I would like to get jquery Autocomplete feature inside a sweetalert2 popup

Swal.fire({
  title: 'Get Users',
  html: '<input type="text" id="name" class="swal2-input" placeholder="Search name...">',

  showCancelButton: false,
  confirmButtonText: 'Next',
  showLoaderOnConfirm: true,
  
}).then((result) => {
  if (result.isConfirmed) {
   Swal.fire('Saved!', '', 'success')
  }
})

$( function() {
    var availableTags = [
      "John",
      "Jane",
      "Janos",
      "Lisa",
      "Rita"
    ];
    $( "#name" ).autocomplete({
      source: availableTags
    });
});

How to achieve this?

It seems that the input "name" is not affected by the autocomplete call.

Solution

The jquery UI autocomplete menu is hiding behind the sweet alert modal. You can give a z-index with high value and it will show. Here is the updated code:-

Swal.fire({
    title: 'Get Users',
    html: '<input type="text" id="name" class="swal2-input" placeholder="Search name...">',

    showCancelButton: false,
    confirmButtonText: 'Next',
    showLoaderOnConfirm: true
}).then((result) => {
    if (result.isConfirmed) {
        Swal.fire('Saved!', '', 'success')
    }
})

$(function () {
    var availableTags = [
        "John",
        "Jane",
        "Janos",
        "Lisa",
        "Rita"
    ];
    $("#name").autocomplete({
        source: availableTags
    });
});

.ui-widget.ui-widget-content.ui-autocomplete{
  z-index: 1111;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>

There is one warning in the console that is because you are using showLoaderOnConfirm: true but you have not defined preconfirm in your function. You can see example of showLoaderOnConfirm and preconfirm on sweetalert documentation.