Sweetalert2 and Bootstrap select

Question

I am trying to create a custom select options using bootstrap select to allow the ability to search my options.

        $.ajax(vendorList).done(function (response) {

            var options = {};

            $.map(response,
                function (o) {
                    options[o.id] = o.display_name;
                });

            var elem = document.createElement("div");
            elem.innerHTML = "<select class='form-control selectpicker' data-live-search='true' title='Search or select...' id='vendor' name='vendor_id'>" 
                + "${Object.entries(options).map(([id, label]) => `<option value='${id}'>${label}</option>`).join('')}" 
                + "<option>Menu</option>" 
                + "</select>";
            
            Swal.fire({
                title: '<strong>Select <b>Vendor</b></strong>',
                html: elem,
                showCancelButton: true,
                focusConfirm: false,
                inputValidator: function (value) {
                    return new Promise(function (resolve, reject) {
                        if (value !== '') {
                            resolve();
                        } else {
                            resolve('You must select a valid vendor.');
                        }
                    });
                }
            }).then(function (result) {
                if (result.isConfirmed) {
                    let vendorId = result.value;
                    storeVendor(vendorId);
                }
            });
        });

This is my code, however it will not display any content (html) in the sweet alert. It will only show the title, and the ok/cancel button.

Any ideas if this can be done, or if I am missing something?

Answer 1

You're trying to use template literals inside a string, but this is not necessary since you're already creating a string with the html content. See your ${Object.entries(options), this is not necessary replace to become Object.entries(options) also I see that this is inside the string as you create + "${Object.entries(options).map(([id, label]) => `<option value='${id}'>${label}</option>`).join('')}" .

$.ajax(vendorList).done(function (response) {

   var options = {};

   $.map(response,
       function (o) {
           options[o.id] = o.display_name;
       });

   var elem = document.createElement("div");
   elem.innerHTML = "<select class='form-control selectpicker' data-live-search='true' title='Search or select...' id='vendor' name='vendor_id'>" 
       + Object.entries(options).map(([id, label]) => `<option value='${id}'>${label}</option>`).join('') 
       + "<option>Menu</option>" 
       + "</select>";
   
   Swal.fire({
       title: '<strong>Select <b>Vendor</b></strong>',
       html: elem,
       showCancelButton: true,
       focusConfirm: false,
       inputValidator: function (value) {
           return new Promise(function (resolve, reject) {
               if (value !== '') {
                  resolve();
               } else {
                  resolve('You must select a valid vendor.');
               }
           });
       }
   }).then(function (result) {
       if (result.isConfirmed) {
           let vendorId = result.value;
           storeVendor(vendorId);
       }
   });
});