javascript - RadioButtonList - 仅显示在文本框中键入的单选按钮

Question

当我们在文本框中输入时，我需要使单选按钮列表可过滤。意思是如果我输入 M 然后应该显示 Music & Movie radio 。我想用 JS 或 jquery 来避免回发。我对他们两个都不太了解。

请建议我已经做过的事情以供引用。

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

Answer 1

RadioButtonList 将创建以下标记，因此您可以在标签上每个 并使用正则表达式切换 行:-

$('#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>