Динамические результаты поиска по нажатию клавиши

Question

У меня есть список элементов, хранящихся в базе данных.

Я использую 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, но я не совсем уверен, как его использовать в этом случае, или даже если это возможно.

Поэтому я добавил:

 $(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);
}

Это, конечно, просто извлекает данные для текстового поля и не разделяет возвращаемыегалочки на всех.Есть ли способ, которым я могу это сделать?

Answer 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/

Обратите внимание, что выше будетвыполните поиск с учетом регистра .Вот немного более сложная версия, которая делает регистр нечувствительным поиск:

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

Второе решение - это то, к чему я прибегнулдать вам общее представление - очевидно, это можно привести в порядок и сделать более эффективным.