ansaurus

Question

Filtering according to data input problem

Answer 1

A:

Try this:

Markup

<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>

Code-Behind

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

Mehdi Golchin 2010-10-14 07:47:39

i wanna more general solution ,, what about if i have a grid view,,

2010-10-15 14:38:09

i tried to put the text box and the list box or grid view on update panel and use text changed but always i need to finalize the letters typing by enter or tab.. i want as soon as i typed letters the gridview or listbox contents changed

2010-10-15 14:40:22

does n't work with me.

2010-10-17 09:02:10

Answer 2

A:

What you're describing sounds an awful lot like the AutoCompleteExtender control from the ASP.NET AJAX Control Toolkit

check out a sample here

yorkrj 2010-10-16 02:31:19

exactly it 's like this control ,,but i tried to use it , but it doesn't achieve the desired goal. i have two controls her.

2010-10-16 08:42:47

Answer 3

A:

<form id="form1" runat="server">
<table>
    <asp:ListBox ID="ListBox1" runat="server">
        <asp:ListItem Text="Abc" Value="Abc"></asp:ListItem>
        <asp:ListItem Text="Ab" Value="Ab"></asp:ListItem>
        <asp:ListItem Text="dbc" Value="dbc"></asp:ListItem>
        <asp:ListItem Text="dc" Value="dc"></asp:ListItem>
        <asp:ListItem Text="ebc" Value="ebc"></asp:ListItem>
        <asp:ListItem Text="ecf" Value="ecf"></asp:ListItem>
        <asp:ListItem Text="fgc" Value="fgc"></asp:ListItem>
        <asp:ListItem Text="fhg" Value="fhg"></asp:ListItem>
        <asp:ListItem Text="qwe" Value="qwe"></asp:ListItem>
    </asp:ListBox>
    <br />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</table>
</form>
<script type="text/javascript">

    function DoListBoxFilter(listBoxSelector, filter, keys, values) {
        var list = $(listBoxSelector);
        var selectBase = '<option value="{0}">{1}</option>';

        list.empty();
        for (i = 0; i < values.length; ++i) { 

            var value = values[i];

            if (value == "" || value.toLowerCase().indexOf(filter.toLowerCase()) >= 0) {
                var temp = '<option value="'+keys[i]+'">'+value+'</option>' ;
                list.append(temp);
            }
        }
    }
    var keys=[];
    var values=[];

    var options=$('#<% = ListBox1.ClientID %> option');
    $.each(options, function (index, item) {
        keys.push(item.value);
        values.push(item.innerHTML);
    });

    $('#<% = TextBox1.ClientID %>').keyup(function() {

    var filter = $(this).val();

    DoListBoxFilter('#<% = ListBox1.ClientID %>', filter, keys, values);

});

and finally this answer my question ,, and if i could find another one for grid view this will be great,, thanks for all guys who help me..

2010-10-17 13:51:20

ansaurus

tags:

views:

answers:

Filtering according to data input problem

related questions