按键动态搜索结果答案

【问题标题】：Dynamic search results on keystroke按键动态搜索结果
【发布时间】：2012-03-31 09:03:17
【问题描述】：

我有一个存储在数据库中的项目列表。

我正在使用 foreach 列出返回的项目，每个项目旁边都有一个复选框，如下所示：

            var db = Database.Open("database");
            var sql = "SELECT * from table";
            var result = db.Query(sql);

...

@{foreach (var user in result) {
            <tr><td>@table.attribute</td> <td>@table.secondAttribute @table.thirdAttribute</td>
                <td><input type="checkbox" name="attribute" value="attribute" /></td></tr>

我想要的功能是一个文本框，当用户输入一个字母时，它会根据用户输入的字符限制我的 foreach 列出的项目数。所以我尝试使用 JQuery autoComplete 模块，但我不完全确定在这种情况下如何使用它，或者即使它是可能的。

所以我添加了：

 $(function(){
            $('#name').autocomplete({source:'getUsers'});
        });

... 输入他们的名字：

然后在 getUsers 中：

@{
    var db = Database.Open("database");
    var term = Request.QueryString["term"] + "%";
    var sql = "SELECT * from table where attribute LIKE @0 OR secondAttribute LIKE @0 OR thirdAttribute LIKE @0";
   var result = db.Query(sql, term);
    var data = result.Select(p => new{label = p.attribute + " " + p.secondAttribute});
    Json.Write(data, Response.Output);
}

当然，这只是检索文本框的数据，根本不分隔返回的复选框。有什么办法可以做到吗？

【问题讨论】：

完整的用户列表有多长？您可以考虑将服务器端代码保持原样，仅使用客户端代码动态显示和隐藏行。
@nnnnnn 这将是理想的，实际上，想想它。该列表不会太长，但有望增长。我怎么能这样做？

标签： javascript jquery json jquery-ui autocomplete

【解决方案1】：

如果根据您的评论可以接受仅客户端搜索，那么这是一种非常简单的方法：

$(document).ready(function() {
   var $rows = $("tr");

   $("#yoursearchinput").keyup(function() {
       var val = $.trim(this.value);
       if (val === "")
           $rows.show();
       else {
           $rows.hide();
           $rows.has("td:contains(" + val + ")").show();
       }
   });
});

演示：http://jsfiddle.net/k5hkR/

请注意，上面将执行 区分大小写 的搜索。下面是一个稍微复杂一点的版本，它会进行 insensitive 搜索：

$(function() {
    var $cells = $("td");

    $("#search").keyup(function() {
        var val = $.trim(this.value).toUpperCase();
        if (val === "")
            $cells.parent().show();
        else {
            $cells.parent().hide();
            $cells.filter(function() {
                return -1 != $(this).text().toUpperCase().indexOf(val);
            }).parent().show();
        }
    });
});

演示：http://jsfiddle.net/k5hkR/1/

第二个解决方案只是我为您提供总体思路的东西 - 显然它可以整理并提高效率。

【讨论】：

这正是我想要的！非常感谢！ :)