asp.net-mvc ajax query on keypress rather than submit button

Question

I am using Ajax.BeginForm to update data on a webpage (as per the code below). Is there anyway i can hit the backend server on every keypress instead of waiting for hitting the submit button

this way, when i type "a", it will query on "a' and show all the db results then if i type "b" it will filter the list on "ab" and so forth . . .

Current Code using Submit Button

 <%using (Ajax.BeginForm("GetPeople", "Contacts", new AjaxOptions { UpdateTargetId = "Contacts", LoadingElementId = "updating", OnSuccess = "done" }))
  { %>

<fieldset style="text-align:left">
<legend>Contacts Search</legend>
<table>
<tr><td>First Name:</td><td> <input style="width:300px" type="text" name="FirstPattern" /></td></tr>
<tr><td>Last Name: </td><td><input style="width:300px" type="text" name="LastPattern" /></td></tr>
<tr><td><input type="submit" value="Search" name="submit" /></td></tr>
</table>
</fieldset>
<% } %>

Answer 1

I'd suggesting looking at the jQuery Autocomplete plugin. It does exactly what you are asking for and only requires that you have a action that responds to the queries that it creates and returns the matching set based on the query parameters. It's highly configurable and well-tested. In your case, you'd need to take advantage of the ability to add parameters to get it to use multiple search criteria like first and last name. For example, use last name as the main autocomplete and send any characters in the first name field as additional values for the query.

Answer 2

I have the following on a text box and I check for a keypress and then go out to the backend to get a list of suburbs.

    $("#suburb").keyup(function(evt) {
        var suburb = jQuery.trim($("#suburb").val());

        if (suburb.length < 3)
            return;

        $("#suburbList").empty();
        $("#suburbList").attr("style", "position:absolute; top:230px; width:150px; left:100px; padding:5px 5px 5px 5px; background-color:#f0f0f0; border:1px solid black;");

        $.post("/Home/GetSuburbList", { suburb: suburb },
            function(suburbs) {
                $.each(suburbs, function(i, thisSuburb) {

                    $("#suburbList").append($('<a/>')
                                .attr("href", "#")
                                .click(function(evt) { $("#suburb").val(thisSuburb.name); $("#suburbList").empty(); $("#suburbList").attr("style", "position:absolute; top:230px; width:150px; left:100px; padding:5px 5px 5px 5px; background-color:#f0f0f0; border:1px solid black; display:none;"); })
                                .html(thisSuburb.name + "<br/>"));

                });
            }, "json");

    });