根据文本框中键入的文本过滤单选按钮列表

Question

我有文本框和单选按钮列表。在文本框焦点上 Radiobuttonlist 得到切换。我的问题是，如果我在单选按钮列表中有大约 1000 个记录列表，那么很难找到特定的单词列表，所以我需要的是假设我在文本框中键入字母并根据键入的文本，我只应该从单选按钮列表中显示相关列表。

例如我输入 cr 然后只显示以 cr 开头的列表单词。

我是这样做的。

<div class="filters-panel service-toggleH">
    <asp:TextBox ID="servicesFilter" placeholder="Search Services" autocomplete="off" CssClass="locator service-text" runat="server"></asp:TextBox>
        <div class="down-icon"></div>
        <div class="clear"></div>
        <div class="toggle-content service-toggle">
            <asp:RadioButtonList ID="servicesList" AutoPostBack="true" CssClass="mark" runat="server" RepeatLayout="Flow">
                        <asp:ListItem Value="All" Selected="True">All Treatments</asp:ListItem>
                </asp:RadioButtonList>
        </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
      $(".service-text").click(function () {
      $(".service-toggle").toggle();
});
</script>

填充单选按钮列表

Private Sub PopulateServices()
        Using conn As New MySqlConnection()
            conn.ConnectionString = ConfigurationManager _
                .ConnectionStrings("conio").ConnectionString()
            Using cmd As New MySqlCommand()
                cmd.CommandText = "select * from services where status = 'active'"
                cmd.Connection = conn
                conn.Open()
                Using sdr As MySqlDataReader = cmd.ExecuteReader()
                    While sdr.Read()
                        Dim item As New ListItem()
                        item.Text = sdr("serviceName").ToString()
                        item.Value = sdr("serviceName").ToString()
                        'item.Selected = Convert.ToBoolean(sdr("IsSelected"))
                        servicesList.Items.Add(item)
                    End While
                End Using
                conn.Close()
            End Using
        End Using
    End Sub

注意：- 我的单选按钮列表从数据库表中填充

Answer 1

您可以按单选按钮的文本对单选按钮列表进行排序，然后很容易找到，但如果找不到，您可以这样做。

$(document).ready(function () {
      $(".service-text").keyup(function () {
           $textBox = $(this);     
           $(".toggle-content service-toggle :radio").each(function(){
                if($(this).next().text().indexOf($textBox.text() == 0))
                      $(this).closest('tr').show();
                else
                      $(this).closest('tr').hide();
           });
      });  
});