Search in checkbox list

Question

Search in checkbox list

Navigation

#1 by (1 votes)

2

I would like to do a real-time search. Similar to DataTables , but in a "list" of Checkbox . Here is my list of CheckBox

<div class="panel-body">
<div>
    <label>
        <input id="chk" name="chk" type="checkbox" value="1"><input name="chk" type="hidden" value="false">
        Profa. Ariadne Tramontina Morais
    </label>
</div>
<div>
    <label>
        <input id="chk" name="chk" type="checkbox" value="2"><input name="chk" type="hidden" value="false">
        Profa. Beatriz Pagnanelli Van Sebroeck
    </label>
</div>
<div>
    <label>
        <input id="chk" name="chk" type="checkbox" value="3"><input name="chk" type="hidden" value="false">
        Prof. Joao
    </label>
</div>

<div>
    <label>
        <input id="chk" name="chk" type="checkbox" value="4"><input name="chk" type="hidden" value="false">
        Profa. Zuleide
    </label>
</div>

javascript html

asked by anonymous 11.08.2014 / 17:04

1 answer

Is it possible to change route system ($ route) in the same URL? Angular JS Google Pie Charts is not displayed when the data has more than one row

score 1 · Accepted Answer

You can do this by using jQuery just by applying the search-criteria id in your search box. Apply a class to your% of parent%, in this case I will use the test class. Put individuals' names inside div .

HTML

<div class="col-lg-6">
                    <h4>Pesquisa por Nome</h4>
                    <input type="text" id="search-criteria" />
</div>

jQuery

$("#search-criteria").on("keyup", function () {
        var g = $(this).val().toLowerCase();
        var value = $.trim($("#search-criteria").val());
        if (value.length > 0) {
            $("span").each(function () {
                var s = $(this).text().toLowerCase();
                if (s.indexOf(g) != -1) {
                    $(this).parent().closest('.teste').show();
                }
                else {
                    $(this).parent().closest('.teste').hide();
                }
            });
        } else {
            $('.teste').hide();
        }
    });