2012-03-14 8 views
3

私はデータベースに格納された項目のリストを持っています。私が持っているしたい機能があるキーストロークの動的検索結果

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

...

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

:私はアイテムを一覧表示するのforeachを使用しています

は、次のようなので、各項目の横にあるチェックボックスに戻りましたユーザが文字を入力すると、ユーザが入力した文字に基づいて私のforeachによってリストされた項目の数を制限するテキストボックス。だから、私はJQueryのautoCompleteモジュールを使用しようとしましたが、この場合にどのように使用するか、または可能であるかどうかは完全にはわかりません。

だから私はに追加:これは、もちろん、単にデータを取得

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

:getUsersで

そして: が自分の名前を入力します...

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

テキストボックスの場合は、返されたチェックボックスをまったく区切りません。私はこれを行う方法がありますか?のみ検索クライアント側は、あなたのコメントにつきとして許容可能である場合

+0

完全なユーザーリストの期間はどのくらいですか?サーバー側のコードをそのまま残し、クライアント側のコードだけで行を動的に表示および非表示にすることも考えられます。 – nnnnnn

+0

@nnnnnnそれは理想的です、実際には、それを考えるようになります。リストはあまり長くないが、うまく成長するだろう。どうすればこのことができますか? –

答えて

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

これは私が欲しかったものです!どうもありがとうございました! :) –