Filter inputOptions of sweetalert promise

Question

In a previous question, I've asked how to use a json file to populate input options using sweetalert2. Beside that, I need to implement a search engine to filter the input options. In the example files than I'm using, the user will have more than 8000 options to choose, so it's imperative to have a filter or search feature.

What I have thought it's to create another input where the user can type whatever he/she wants and then "change" the input options regarding that. Please check this image:

This data come from a DB, so, another option is to perform a mysql query where I filter the parameters with a like command, but, since the data is already (or should be already) downloaded, I think it will be more efficient to filter this data locally. Although, DB query is pretty fast. (Question 1: I'm right?)

So, the code that raises the sweetalert modal is:

$(function(){
        $("#taginfo").click(function(){
            console.log("click on tag info");
            swal({
            title: 'Select Tag',
            html: '<input id="swal-input1" class="swal2-input">',
            input: 'select',
            inputOptions: inputOptionsPromise,
            inputPlaceholder: 'Select tag',
            showCancelButton: true,
            inputValidator: function (value) {
                return new Promise(function (resolve, reject) {
                  if (value != '') {
                    document.getElementById('taginfo').value = value;
                    resolve();
                  }else {
                      reject('You need to select one tag')
                  }
                })
            }
            }).then(function (result) {
                swal({
                    type: 'success',
                    html: 'You selected: ' + result
                })
            })
        });
    });

And I'm gathering the data using this code:

var inputOptionsPromise = new Promise(function (resolve) {
    setTimeout(function () {
            //place options here
            console.log("options promise");
            $.getJSON("/resources/tags.json", function(data) {
                console.log(data);
                resolve(data)
            });
    }, 2000)
})

Question 2: How to filter the data?

Answer 1

I've been able to solve it like this:

var inputOptionsFilteredPromise;
    function generatePromise(){
        console.log("generatePromise");
        inputOptionsFilteredPromise = new Promise(function (resolve) {
            setTimeout(function () {
                $.getJSON("/resources/tags.json", function(data) {
                    for (var key in data) {
                        if (data.hasOwnProperty(key)) {
                            console.log("key: "+key+ " userInput: "+userInput);
                            if (key.indexOf(userInput) !== -1) {
                                console.log("*************** Match! ***************");
                            }else{
                                delete data[key];
                            }
                        }
                    }
                    // console.log("data: "+ Object.getOwnPropertyNames(data));
                    resolve(data);
                });
            }, 2000)
        })
    }

    var userInput;
    $(document).on('click', '.SwalBtn1', function() {
        //Some code 1
        console.log('Button search');
        userInput = document.getElementById('swal-input1').value;
        console.log("userInput: "+userInput);
        generatePromise();
        swal({
            title: 'Filtered Tag',
            input: 'select',
            inputOptions: inputOptionsFilteredPromise,
            inputPlaceholder: 'Select tag',
            confirmButtonColor: '#25C76A',
            showCancelButton: true,
            inputValidator: function (value) {
                return new Promise(function (resolve, reject) {
                  if (value != '') {
                    document.getElementById('taginfo').value = value;
                    resolve();
                  }else {
                      document.getElementById('taginfo').value = "default";
                      resolve('You need to select one tag')
                  }
                })
            }
        }).then(function (result) {
                swal({
                    type: 'success',
                    html: 'You selected: ' + result
                })
        })
    });
    $(function(){
        $("#taginfo").click(function(){
            console.log("click on tag info");
            swal({
            title: 'Select Tag',
            input: 'select',
            inputOptions: inputOptionsPromise,
            inputPlaceholder: 'Select tag',
            confirmButtonColor: '#25C76A',
            html:'<input id="swal-input1" class="swal2-input" placeholder="Search...">' + '<button type="button" role="button" tabindex="0" class="SwalBtn1 customSwalBtn">' + 'Search' + '</button>',
            showCancelButton: true,
            inputValidator: function (value) {
                return new Promise(function (resolve, reject) {
                  if (value != '') {
                    document.getElementById('taginfo').value = value;
                    resolve();
                  }else {
                      document.getElementById('taginfo').value = "default";
                      resolve('You need to select one tag')
                  }
                })
            }
            }).then(function (result) {
                swal({
                    type: 'success',
                    html: 'You selected: ' + result
                })
            })
        });
    });