Ajax.BeginForm replaces whole page onchange of a dropdownlist

The purpose

I have a simple table listing names (in a partial view), and above it a dropdownlist containing those names. The purpose is to filter the table based on the name which was selected in the dropdownlist. The filtering should happen as soon as the selected value in the dropdownlist changes, and should render only the partial view again.

The problem

When I select a value in the dropdownlist, the partial view isn't rendered in the other view but is displayed as a whole page. However, when I include a submit button in my Ajax.BeginForm block, and trigger the action on the submit button, it does function as expected...

The code

Controller

public PartialViewResult Filter(string filterName) {
    var names = from p in db.People
                select p;

    if (!String.IsNullOrEmpty(filterName))
    {
        names = names.Where(p => p.Name.Equals(filterName));
    }

    return PartialView("_PersonsTable", names);
}

View

@model IEnumerable<Sandbox.Models.Person>

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

@using (Ajax.BeginForm("Filter", "Person", new AjaxOptions { 
    HttpMethod = "Get", UpdateTargetId = "SearchResults", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace }))
{
    @Html.DropDownList("filterName", new SelectList(ViewBag.Names), "Select a name", new   { onchange = "this.form.submit()" })
}

@Html.Partial("_PersonsTable")

Partial View

@model IEnumerable<Sandbox.Models.Person>

<table id="SearchResults">
    <tr>
        <th>
            Name
        </th>
        <th>
            Age
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(