实时搜索GridView控件

时间:2014-02-22 07:10:31

标签: c# asp.net

过去我使用jQuery / Ajax来捕获最终用户的按键,并构建一个WHERE子句来过滤Web表单上的数据。

我现在正在利用ASP.NET 4.5中的强类型。我想知道是否有人可以在Gridview上进行实时过滤/搜索。

基本上,我有三个网格,都显示不同的信息。我希望最终用户键入或从下拉列表中选择(通用搜索),所有网格都会反映这些变化。

我并不反对采用旧方法,只是没有;知道我能用什么新东西吗?

1 个答案:

答案 0 :(得分:2)

所以你可以看看this。我希望这能帮到你。

这是HTML:

<input id="searchInput" value="Type To Filter">
    <br/>
    <table>
        <thead>
            <tr>
                <th>Column1</th>
                <th>Column2</th>
            </tr>
        </thead>

        <tbody id="fbody">
            <tr>
                <td>cat</td>
                <td>one</td>
            </tr>
            <tr>
                <td>dog</td>
                <td>two</td>
            </tr>
            <tr>
                <td>cat</td>
                <td>three</td>
            </tr>
            <tr>
                <td>moose</td>
                <td>four</td>
            </tr>
            <tr>
                <td>mouse</td>
                <td>five</td>
            </tr>
            <tr>
                <td>dog</td>
                <td>six</td>
            </tr>
        </tbody>
    </table>

这是JavaScript代码:

$("#searchInput").keyup(function () {

    // Split the current value of searchInput
    var data = this.value.split(" ");

    // Create a jQuery object of the rows
    var jo = $("#fbody").find("tr");
    if (this.value == "") {
        jo.show();
        return;
    }

    // Hide all the rows
    jo.hide();

    // Recusively filter the jquery object to get results.
    jo.filter(function (i, v) {
        var $t = $(this);
        for (var d = 0; d < data.length; ++d) {
            if ($t.is(":contains('" + data[d] + "')")) {
                return true;
            }
        }
        return false;
    })
    // Show the rows that match.
    .show();
}).focus(function () {
    this.value = "";
    $(this).css({
        "color": "black"
    });
    $(this).unbind('focus');
}).css({
    "color": "#C0C0C0"
});

Enter link description here