Isotop-Kombinationsfilter zur Ausgabe von Ergebnissen aus Mehrfachauswahl, Einzelauswahl und freiem Text

Question

Ich versuche, einige Filtertypen mit dem Isotope-Plugin zu kombinieren: Freitextsuche, Mehrfachauswahl, Einzelauswahl (3 separate Gruppen) .

Ich bin nicht einmal in der Nähe von JS/jquery in der Nähe, weshalb ich auf die folgenden Beispiele angewiesen bin (beide von David DeSandro glaube ich), um mein gewünschtes Ergebnis zu erhalten.

Hier ist mein codepen Beispiel: https://codepen.io/jawtt/pen/pPaxzR

$('#select').on('click', 'input', function() { 
selectFilter = $(this).attr('data-filter'); 
console.log(selectFilter) 
$grid.isotope(); 
}); 

Wie Sie sehen können, ist dies definitiv nicht die richtige Methode meine Multiauswahlfilter für die Bindung. Ich verstehe, dass die .on (click) -Methode nicht ausgewählte Elemente nicht berücksichtigt. Ich verstehe, dass ich eine Variable haben muss, die die Eingabe (Checkbox-Typ) Feldwerte speichert und jedes Mal aktualisiert wird, wenn sich diese Feldwerte ändern. Ich muss dann irgendwie diese Variable verweisen in der ‚init Isotop‘ Funktion unten:

var $grid = $('.grid').isotope({ 
    itemSelector: '.element-item', 
    layoutMode: 'fitRows', 
    filter: function() { 
    var $this = $(this); 
    var searchResult = qsRegex ? $this.text().match(qsRegex) : true; 
    var buttonResult = buttonFilter ? $this.is(buttonFilter) : true; 
    var selectResult = selectFilter ? $this.is(selectFilter) : true; 
    return searchResult && buttonResult && selectResult; 
    } 
}); 

Sie den Code feststellen, an der Unterseite meines codenpen js Beispiel als Kommentar gekennzeichnet. Ich verstehe, wie das funktioniert, aber ich kann es nicht in mein existierendes Beispiel integrieren.

Endergebnis: Ich möchte für das Suchfeld, Schaltflächenfilter und wählen Sie Filter, um kombinierte Suchergebnis nach Abfrage von Elementen im Isotopenraster (.grid) mit Daten-Filter-Werte.

Jede Hilfe und Erklärung des Updates ist willkommen!

Answer 1

Mit ein wenig Hilfe habe ich es endlich zur Arbeit gebracht. Werfen Sie einen Blick auf die Codepen hier: https://codepen.io/jawtt/pen/pPaxzR

function setCustomFilter() { 
    var qsRegex = $('#quicksearch').val(); 
    console.log("qsregex:" + qsRegex); 
    $('.element-item').removeClass('show'); 
    // if($('.element-item').text().match(qsRegex)) { 
    // $('.element-item').addClass('show'); 
    // } 
    searchFilter = ''; 
    $('.element-item').each(function (index) { 
    if (qsRegex == '') { 
     $('.element-item').eq(index).addClass('show'); 
     searchFilter = '.show'; 
    } else if ($(this).text().toLowerCase().indexOf(qsRegex) >= 0) { 
     console.log($(this).text()); 
     $('.element-item').eq(index).addClass('show'); 
     searchFilter = '.show'; 
    } 

    });