RadioButtonList - Display nur Radiobutton in Textfeld eingegeben

Question

Ich muss RadioButtonlist filterbar machen, wie wir in Textfeld eingegeben. Mittel Wenn ich M eintippe, dann sollte Music & Movie Radio angezeigt werden. Dies möchte ich mit JS oder Jquery erreichen, um Postback zu vermeiden. Ich habe keine Ahnung von beiden.

Bitte schlagen Sie mir solche Dinge vor, auf die bereits Bezug genommen wird.

<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

Die RadioButtonList wird das folgende Markup erstellen, so dass Sie könnte each über den Etiketten und verwenden Regex toggle die Zeile: -

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