RadioButtonList - テキストボックスに入力されたラジオボタンのみを表示する

Question

テキストボックスに入力したときにradiobuttonlistをフィルタ可能にする必要があります。意味Mと入力すると、Music & Movieラジオが表示されます。これは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は、次のマークアップを作成しますので、あなたは、ラベルの上にeachとはtoggleに行正規表現を使用することができます： -

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