I have a list of items stored in a database.

I am using a foreach to list the items returned with a checkbox next to each item like so:

            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>

The functionality I would like to have is a textbox which, upon the user typing a letter, would limit the number of items listed by my foreach based on what character the user enters. So I've tried to use the JQuery autoComplete module, but I'm not entirely sure how to use it in this case, or even if it is possible.

So I added in :

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

... Enter their name:

And then in 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);
}

This, of course, just retrieves the data for the textbox and doesn't delimit the returned checkboxes at all. Is there a way I can do this ?

I have a list of items stored in a database.

I am using a foreach to list the items returned with a checkbox next to each item like so:

            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>

The functionality I would like to have is a textbox which, upon the user typing a letter, would limit the number of items listed by my foreach based on what character the user enters. So I've tried to use the JQuery autoComplete module, but I'm not entirely sure how to use it in this case, or even if it is possible.

So I added in :

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

... Enter their name:

And then in 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);
}

This, of course, just retrieves the data for the textbox and doesn't delimit the returned checkboxes at all. Is there a way I can do this ?

• javascript
• jquery
• json
• jquery-ui
• autoplete

• How long is the full list of users? You might consider leaving your server-side code as is and dynamically showing and hiding rows with just client-side code. – nnnnnn Commented Mar 14, 2012 at 20:43
• @nnnnnn That would be ideal, actually, e to think of it. The list is not too long but will hopefully grow. How could I do this? – Simon Kiely Commented Mar 14, 2012 at 20:47

1 Answer 1

If client-side only search is acceptable as per your ment, here's a really simple way to do it:

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

Demo: http://jsfiddle/k5hkR/

Note that the above will do a case sensitive search. Here is a slightly more plicated version that does a case insensitive search:

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

Demo: http://jsfiddle/k5hkR/1/

The second solution is just something I whipped up to give you the general idea - obviously it can be tidied up and made more efficient.