javascript - 使用文本框中键入的字母过滤单选按钮列表

Question

我想用文本框中输入的字母过滤我的复选框列表。我的复选框列表从数据库获取数据。这是我用 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>