jquery Filterung checkbox-Liste durch Eingabefeld

Ich habe eine lange checkbox-Liste (mit gleichen Namen). Ich will erstellen Sie eine Filter-system basiert auf der Eingabe in einem Textfeld. Ich meine, wenn ich Schreibe "ter" in meinem Textfeld möchte ich zeigen nur die chechboxes die Werte übereinstimmt %ter% (bedeutet die phrase "ter" überall). Was ist der beste Weg, um zu erreichen, dass mit Hilfe von jquery? Ich entschuldige mich, wie ich bin sehr neu in jquery.

<input type="checkbox" name="chk" id="chk1" value="casual">casual
<input type="checkbox" name="chk" id="chk2" value="intermediate">intermediate
<input type="checkbox" name="chk" id="chk3" value="hunter">hunter
<input type="checkbox" name="chk" id="chk4" value="forest">forest
<input type="checkbox" name="chk" id="chk5" value="term">extreme
<input type="checkbox" name="chk" id="chk6" value="river">river
<input type="checkbox" name="chk" id="chk7" value="beach">beach
<input type="text" id="chkfilter">

Also, wenn ich Schreibe "ter" in das Textfeld, checkbox 2, 3 und 5 sichtbar sein soll, die anderen verborgen werden soll/gegangen. Wie macht man das? Mit div für jedes einzelne Element? Auch, wie die Suche mit jquery übereinstimmen, %ter%

InformationsquelleAutor abdfahim | 2013-01-05
  1. 10

    Wenn Sie etwas in das Textfeld, aktivieren Sie die Kontrollkästchen, um es zu sehen, dass der string vorhanden ist, in den Wert mit indexOf, und stellen Sie den Anzeige-Eigenschaft basierend auf (I block verwendet, aber inline ist wohl richtig, für die Checkboxen):

    $('#chkfilter').on('keyup', function() {
    var query = this.value;

    $('[id^="chk"]').each(function(i, elem) {
          if (elem.value.indexOf(query) != -1) {
              elem.style.display = 'block';
          }else{
              elem.style.display = 'none';
          }
    });
});

    Den text nach der checkbox ist nicht Teil der checkbox und nicht versteckt, das zu tun, sollten Sie wahrscheinlich wickeln Sie es in ein label und tun Sie etwas wie dieses JSBIN ??

    • Super .. dein Beispiel perfekt dient meinem Zweck .. nur die Sache ist die, ich möchte zu re-arrangieren das ganze so, dass es keine leeren Zeilen nach dem filtern ... hoffentlich kann ich es selber tun .. danke 🙂
    • Ausgezeichnet!! Im Falle der groß-und Kleinschreibung in Suche verwenden toLowerCase(). ZB. elem.Wert.toLowerCase().indexOf(Abfrage)
    InformationsquelleAutor adeneo
  2. 2

    Könnten Sie filter durch value mit dem jQuery "- Attribut Enthält Selector" und dann ausblenden oder deaktivieren der Checkboxen. Über das Etikett - es gibt viele Möglichkeiten, dies zu tun. Entweder wickeln Sie das ganze in einen div und verwenden .parent() auf dem gefilterten Checkboxen zu verbergen, die ganze Sache, oder wickeln Sie den label-text in eine <label> mit einer entsprechenden id zu verstecken, danach.

    Werfen Sie einen Blick auf das jQuery-API-Docs: jQUery API - Attribut Enthält Selector

    InformationsquelleAutor Nic
  3. 2
    $(":checkbox").each(function () {
    $(this).add(this.nextSibling)
        .add(this.nextSibling.nextSibling)
        .wrapAll("<label class='country'></label>")
})
$("#text").keyup(function () {
    var re = new RegExp($(this).val(), "i")
    $('.country').each(function () {
        var text = $(this).text(),
            matches = !! text.match(re);
        $(this).toggle(matches)
    })
})

    ich m mit dieser Lösung für filter-checkbox-Namen mit der textbox-Wert

    InformationsquelleAutor nikunj sobhashana
Schreibe einen Kommentar