javascript - 过滤 sweetalert promise 的 inputOptions

Question

在上一个问题中，我询问了如何使用 json 文件使用 sweetalert2 填充输入选项。除此之外，我需要实现一个搜索引擎来过滤输入选项。在我使用的示例文件中，用户将有超过 8000 个选项可供选择，因此必须具有过滤器或搜索功能。

我认为这是创建另一个输入，用户可以在其中输入他/她想要的任何内容，然后“更改”与此相关的输入选项。请检查此图像：

该数据来自数据库，因此，另一种选择是执行 mysql 查询，在其中我使用like命令过滤参数，但是，由于数据已经（或应该已经）下载，我认为这样做会更有效在本地过滤此数据。虽然，数据库查询非常快。（问题1：我是对的？）

因此，引发 sweetalert 模态的代码是：

$(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
                })
            })
        });
    });

我正在使用以下代码收集数据：

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)
})

问题2：如何过滤数据？

Answer 1

我已经能够像这样解决它：

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
                })
            })
        });
    });