CODEWITHSUNDEEP
javascriptasp.netvb.net
user3966883
user3966883

Reputation:

filter radiobuttonlist with letters typed in textbox

I want to filter mycheckbox list with letters typed in textbox. My checkboxlist get datafrom database. Here what I tried with javascript but it's not working. Is there any way to do like.

<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>

Upvotes: 1

Views: 48

Answers (2)

INDIA IT TECH
INDIA IT TECH

Reputation: 1898

Change to below,

$(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();
            }
        });
    });
});

Upvotes: 0

Lesmian
Lesmian

Reputation: 3952

TextBox will have different id in the browser because its server control. Here is working script:

<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>

Upvotes: 0

Related Questions