在文本框中键入字母的筛选器单选按钮列表

filter radiobuttonlist with letters typed in textbox

本文关键字：筛选 单选按钮 列表 文本      更新时间：2023-09-26

我想用文本框中键入的字母过滤我的复选框列表。我的复选框列表从数据库中获取数据。在这里，我尝试了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>
文本框在

浏览器中将具有不同的 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>

更改为下面，

$(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();
            }
        });
    });
});
相关文章：