2012-03-14 47 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