CODEWITHSUNDEEP
javascriptjqueryasp.netvb.net
user3966883
user3966883

Reputation:

RadioButtonList - display only radio button typed in textbox

I need to make radiobuttonlist to be filterable as we typed in textbox. Means If I type M then Music & Movie radio should be shown. This I want to achieve with JS or jquery to avoid postback. I have not good idea of either of them.

Please suggest me such kind of things which is already done to refer.

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /><br />

<asp:RadioButtonList ID="Radio1" runat="server" RepeatLayout="Flow">
    <asp:ListItem value="1">Music</asp:ListItem>
    <asp:ListItem value="2">Sports</asp:ListItem>
    <asp:ListItem value="3">Cooking</asp:ListItem>
    <asp:ListItem value="4">Travelling</asp:ListItem>
    <asp:ListItem value="5">Moview</asp:ListItem>
    <asp:ListItem value="6">Cricket</asp:ListItem>
</asp:RadioButtonList>

Upvotes: 3

Views: 71

Answers (1)

BenG
BenG

Reputation: 15154

The RadioButtonList will create the following markup, so you could each over the labels and use regex to toggle the row:-

$('#TextBox1').keyup(function() {

  var text = $(this).val();
  var regex = new RegExp(text, 'ig');

  $('#Radio1 label').each(function() {
    $(this).closest('tr').toggle(regex.test(this.innerText));
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input name="TextBox1" type="text" id="TextBox1">

<br/>
<br/>

<table id="Radio1" border="0">
  <tbody>
    <tr>
      <td>
        <input id="Radio1_0" type="radio" name="Radio1" value="1">
        <label for="Radio1_0">Music</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="Radio1_1" type="radio" name="Radio1" value="2">
        <label for="Radio1_1">Sports</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="Radio1_2" type="radio" name="Radio1" value="3">
        <label for="Radio1_2">Cooking</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="Radio1_3" type="radio" name="Radio1" value="4">
        <label for="Radio1_3">Travelling</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="Radio1_4" type="radio" name="Radio1" value="5">
        <label for="Radio1_4">Moview</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="Radio1_5" type="radio" name="Radio1" value="6">
        <label for="Radio1_5">Cricket</label>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 3

Related Questions