Question

我想用文本框中输入的字母过滤mycheckbox列表。我的checkboxlist从数据库中获取数据。这是我尝试使用javascript但它无法正常工作的地方。有什么办法可以做。

<asp:TextBox ID="locationFilter" placeholder="Search Area" CssClass="locator filter-text" runat="server"></asp:TextBox>

<asp:RadioButtonList ID="areasList" ClientIDMode="Static" autocomplete="off" CssClass="mark" AutoPostBack="true" runat="server" RepeatLayout="Flow">
</asp:RadioButtonList>

<script>
$(function() {
    $('#locationFilter').on('keyup', function() {
        var query = this.value;     
        $('[id^="areasList"]').each(function(i, elem) {
              if (elem.value.indexOf(query) != -1) {
                  $(this).closest('label').show();
              }else{
                  $(this).closest('label').hide();
              }
        });
    });    
});
</script>

Answer 1

TextBox在浏览器中将具有不同的ID，因为它的服务器控制。这是工作脚本：

<script>
    $(function () {
        $('input[id $= "locationFilter"]').on('keyup', function () {
            var query = this.value;

            $('input[id ^= "areasList"]').each(function (i, elem) {
                var radioButton = $(this);
                var show = radioButton.val().indexOf(query) != -1;
                radioButton.toggle(show);
                var label = radioButton.next('label');
                label.toggle(show);
                label.next('br').toggle(show);
            });
        });

    });
</script>

Answer 2

更改为以下，

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

        $('#areasList input[type=radio]').each(function (i, elem) {
            if (elem.value.indexOf(query) != -1) {
                $(this).show();
                $(this).next('label').show();
            } else {
                $(this).hide();
                $(this).next('label').hide();
            }
        });
    });
});

过滤radiobuttonlist与在文本框中键入的字母

2 个答案: