根据文本框中的键入文本过滤RadioButtonList

时间:2016-04-29 10:47:34

标签: javascript c# asp.net vb.net radiobuttonlist

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

E.g。我输入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>

填充的radiobuttonlist

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

注意: - 我从数据库表填充的radiobuttonlist

1 个答案:

答案 0 :(得分:0)

您可以通过文本单选按钮对单选按钮列表进行排序,然后很容易找到,但如果不能,那么您可以执行此类操作。

$(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();
           });
      });  
});