Question

87

Dynamic search results on keystroke

rated 0 times [ 94] [ 7] / answers: 1 / hits: 19454 / 12 Years ago, wed, march 14, 2012, 12:00:00

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').autocomplete({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 ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

virginia

Add To Favorites

Follow

Total Points: 632

Total Questions: 95

Total Answers: 95

Location: China

Member since Mon, Aug 22, 2022

2 Years ago

answered 12 Years ago jenamackennac · Accepted Answer

If client-side only search is acceptable as per your comment, 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.net/k5hkR/

Note that the above will do a case sensitive search. Here is a slightly more complicated 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.net/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.