2012-03-14 86 views
3

我有一个存储在数据库中的项目列表。按键动态搜索结果

我使用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); 
} 

这,当然,只是检索数据对于文本框并且根本不分隔返回的复选框。有什么办法可以做到这一点?

+0

用户的完整列表需要多长时间?您可能会考虑将您的服务器端代码保持原样并使用客户端代码动态显示和隐藏行。 – nnnnnn 2012-03-14 20:43:15

+0

@nnnnnn这将是理想的,实际上,可以想到它。这份清单不会太长,但希望有所增长。我怎么能这样做? – 2012-03-14 20:47:03

回答

6

如果客户端只搜索是按您的评论可以接受的,这里是一个非常简单的方法来做到这一点:

$(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/

注意上面会做区分大小写搜索。下面是确实的情况稍微复杂一点的版本不敏感搜索:

$(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/

第二个解决方案是只是我刮起了给你的总体思路 - 显然它可以是整理并提高效率。

+0

这正是我想要的!非常感谢你! :) – 2012-03-14 22:55:42