.net - 根据数据输入问题进行过滤

Question

我有两个控件:

1. 列表框
2. 文本框

列表框绑定(bind)其来自数据库的数据。我想要的是:当我在文本框中键入任何字母时，列表框将根据文本框进行过滤(但只需在文本框中键入任何字母，而不在最后单击 Enter 或 Tab 或任何其他键盘键)。如果没有 Enter 或 Tab，这对我来说总是不起作用。

我的 ASP.NET 问题有解决办法吗？

当我在文本框中键入任何字母时，列表框会直接根据文本框进行绑定(bind)。

我有列表框，但在其他页面中我使用 gridview。

例如:

<asp:Label ID="lbl_englishTitle" runat="server" CssClass="subtitle" 
        Text="Searching by english title :"></asp:Label>
<asp:TextBox ID="txt_filterByEnglishTitle" runat="server" AutoPostBack="True" 
        ontextchanged="txt_filterByEnglishTitle_TextChanged"></asp:TextBox>
<asp:GridView ID="gv_viewPrograms" runat="server" 
        AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="programId"
        DataSourceID="ObjectDataSource2">
    <Columns>
        <asp:TemplateField HeaderText="#">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox7" runat="server" Height="20px"
                     ReadOnly="True"  Text='<%# Bind("programId") %>'
                     Width="100px"></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label7" runat="server" 
                     Text='<%# Bind("programId") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="english title" >
            <EditItemTemplate>
                <asp:TextBox ID="TextBox8" runat="server" Height="20px" 
                     Text='<%# Bind("englishTitle") %>' Width="100px">
                </asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator3"
                     runat="server" ControlToValidate="TextBox8"
                     ErrorMessage="the english title must be entered" 
                     Height="0px" Width="0px">*</asp:RequiredFieldValidator>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label8" runat="server"
                     Text='<%# Bind("englishTitle") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="arabic title">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox9" runat="server" Height="20px" 
                     Text='<%# Bind("arabicTitle") %>' Width="100px">
                </asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label9" runat="server"
                     Text='<%# Bind("arabicTitle") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="number of terms">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox10" runat="server" Height="20px" 
                     Text='<%# Bind("numOfTerms") %>' Width="100px">
                </asp:TextBox>
                <asp:RangeValidator ID="RangeValidator3" runat="server" 
                     ControlToValidate="TextBox10" 
                     ErrorMessage="the item must be a number not _
                     greater than 10"
                     Height="0px" MaximumValue="10" MinimumValue="0"
                     Type="Integer" Width="0px">*</asp:RangeValidator>
                <asp:CompareValidator ID="CompareValidator5" runat="server" 
                     ControlToValidate="TextBox10"
                     ErrorMessage="the term must be a whole value" 
                     Height="0px" Operator="DataTypeCheck" Type="Integer"
                     Width="0px">*</asp:CompareValidator>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label10" runat="server"
                     Text='<%# Bind("numOfTerms") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="credit hours">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox11" runat="server" Height="20px" 
                     Text='<%# Bind("creditHours") %>' Width="100px">
                </asp:TextBox>
                <asp:CompareValidator ID="CompareValidator6" runat="server" 
                     ControlToValidate="TextBox11" 
                     ErrorMessage="the credit hours must be a whole value"
                     Height="0px"Operator="DataTypeCheck" Type="Integer"
                     Width="0px">*</asp:CompareValidator>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label11" runat="server"
                     Text='<%# Bind("creditHours") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="elective">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox12" runat="server" Height="20px" 
                     Text='<%# Bind("elective") %>' Width="100px">
                </asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label12" runat="server"
                     Text='<%# Bind("elective") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CommandField HeaderText="Edit" ShowEditButton="True" />
        <asp:CommandField HeaderText="Delete" ShowDeleteButton="True" />
    </Columns>
</asp:GridView>`

<asp:ObjectDataSource ID="ObjectDataSource2" runat="server" 
       SelectMethod="GetAllPrograms" DeleteMethod = "Delete"
       TypeName="Managers.Program" UpdateMethod="Save">
    <DeleteParameters>
        <asp:Parameter Name="programId" Type="Int32" />
    </DeleteParameters>
    <UpdateParameters>
        <asp:Parameter Name="numOfTerms" Type="Int32" />
        <asp:Parameter Name="creditHours" Type="Int32" />
        <asp:Parameter Name="elective" Type="String" />
        <asp:Parameter Name="paragraphId" Type="Int32" />
        <asp:Parameter Name="type" Type="Int16" />
        <asp:Parameter Name="FK_UnitId" Type="Int32" />
        <asp:Parameter Name="arabicTitle" Type="String" />
        <asp:Parameter Name="englishTitle" Type="String" />
        <asp:Parameter Name="programId" Type="Int32" />
    </UpdateParameters>
</asp:ObjectDataSource>`

我的代码背后的代码:

protected void txt_filterByEnglishTitle_TextChanged(object sender, EventArgs e)
    {
        gv_viewPrograms.DataSourceID = null;
        gv_viewPrograms.DataSourceID = ObjectDataSource3.ID;
        gv_viewPrograms.DataBind();
        chb_allPrograms.Checked = false;
       // txt_filterByEnglishTitle.Text = string.Empty;
        txt_filterByEnglishTitle.Focus();
    }

Answer 1

试试这个:

标记

<form id="form1" runat="server">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
    <asp:ListBox ID="ListBox1" runat="server" DataTextField="Name" DataValueField="Id"></asp:ListBox><br />
    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</form>

JavaScript

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

    var categories = [],
        elem = $('select[id$=ListBox1]');

    $(document).ready(function() {

        var addNewItem = function(o) {
            $('<option value="' + o.id + '">' + o.name + '</option>').appendTo(elem);
        }

        // Put the current list in a variable
        $('option', elem).each(function(idx, opt) {
            categories.push({
                id: $(opt).val(),
                name: $(opt).html()
            });
        });

        $('input[id$=TextBox1]').keyup(function(e) {

            // Clear current items
            $('option', elem).remove();

            if (this.value.match(/^[\w\s]+$/)) {
                var m = new RegExp(this.value, 'i');
                // Add new items
                for (var i = 0; i < categories.length; i++) {
                    if (categories[i].name.match(m))
                        addNewItem(categories[i]);
                }
            }
            else {
                for (var i = 0; i < categories.length; i++) {
                    addNewItem(categories[i]);
                }
            }

        });

    });

</script>

代码隐藏

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        var categories = new[]
        {
            new { Id = 1, Name = "Desktop" },
            new { Id = 2, Name = "Laptop" },
            new { Id = 3, Name = "Printer" }
        };

        ListBox1.DataSource = categories;
        ListBox1.DataBind();
    }
}

protected void Button1_Click(object sender, EventArgs e)
{
    Response.Write(ListBox1.SelectedIndex);
}