Filter inputOptions von sweetalert Versprechen

Question

In einer vorherigen Frage, I've asked how to use a json file to populate input options using sweetalert2. Außerdem muss ich eine Suchmaschine implementieren, um die Eingabeoptionen zu filtern. In den Beispieldateien, die ich verwende, hat der Benutzer mehr als 8000 Optionen zur Auswahl, so dass ein Filter oder eine Suchfunktion unbedingt erforderlich ist.

Was ich gedacht habe, ist es, eine andere Eingabe zu erstellen, wo der Benutzer eingeben kann, was auch immer er/sie will und dann die Eingabeoptionen in Bezug auf das "ändern". Bitte aktivieren Sie dieses Bild:

Diese Daten stammen aus einer DB, so, eine weitere Option ist eine MySQL-Abfrage durchzuführen, wo ich die Parameter mit einem wie Befehl filtern, aber, da bereits die Daten (oder sollte bereits heruntergeladen werden), ich denke, es wird effizienter sein, diese Daten lokal zu filtern. Obwohl die DB-Abfrage ziemlich schnell ist. (Frage 1: Ich bin richtig?)

der Code, so dass der sweetalert modal aufwirft, ist:

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

Und ich sammle die Daten mit diesem 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) 
}) 

Frage 2: Wie man die Daten filtert?

Answer 1

Ich habe in der Lage gewesen, es so zu lösen:

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