Create google suggest effect with asp.net mvc and jquery

What I want to achieve, is not the autocomplete effect. What I want to achieve is that when you type on google the search results come up almost inmediately without cliking on a search button.

I already did the ajax example with a search button, but I would like it to make it work while you type it shows the results in a table.

The problem is I have no idea where to start.

EDIT: To ask it in another way. Lets 开发者_高级运维suppose I have a grid with 1000 names. The grid is already present on the page. I have a textbox, that when typing must filter that grid using AJAX, no search button needed.

Thanks

---

Use a PartialView and jQuery.ajax.

$(document).ready(function () {
    $("#INPUTID").bind("keypress", function () {
        if($(this).val().length > 2) {
            $.ajax({
                url: "URL TO CONTROLLER ACTION",
                type: "POST|GET",
                data: {query: $("#INPUTID").val(),
                success: function (data, responseStatus, jQXHR)
                {
                    $("#WRAPPERDIVID").html(data);
                }
            });
        }
    });
});

Then in your view:

<div>
    <input type="text" id="INPUTID" />
</div>
<div id="WRAPPERDIVID"></div>

Edit

Also, you could build in some sort of timer solution that submits the request after say 1 second of no typing, so you don't get a request on every key press event.

---

Theres a good example you can check here try to type 's' in the search

if thats what you want then the code and the tutorial is here

another good example here

---

If you are working on "filtering" a set already located on the page, then you seem to want to set the visibility of the items in the list, based upon the search criteria.

If so, then first, you need to first establish your HTML for each item. You can use the following for each item:

<div class="grid">
    <div class="item"><input type="text" value="{name goes here}" readonly="readonly" /></div>
    { 999 other rows }
</div>

Then, you must use some jquery to set each row visible/invisible based on the search criteria:

$("#searchBox").live("change", function () {
    $("div[class='grid'] input").each(function () {
        var search = $("#searchBox").val();
        if ($(this).val().toString().indexOf(search) != -1)
            $(this).parent().show();
        else
            $(this).parent().hide();
    });
});

This will cause the visibility of each item to change, depending on whether or not the text in the search box matches any text in the item.