如何显示搜索结果＆＃39;自动完成＆＃39;在同一页上

Question

我的自动完成搜索提交按钮在同一页面（索引）中显示/显示结果的时间已经很长时间了，说实话我不知道究竟是怎么做的。

在我的索引页面我有表格，其中包含您在ScreenShots中看到的电子邮件列表：Table - List of Emails.img

* PS AutoComplete正在运行，但没有提交按钮。
任何人都可以帮我这个！ :)我真的很感激:) 感谢。

Index.cshtml：

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
     rel="Stylesheet" type="text/css" />

    <script type="text/javascript">
        $(function () {
            $("#txtEmail").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/User/AutoComplete/',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return item;
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("#hfEmail").val(i.item.val);
                },
                minLength: 1
            });
        });
    </script>
    @using (Html.BeginForm("Index", "User", FormMethod.Post))
    {
        <input type="text" id="txtEmail" name="EmailName" />
    <input type="hidden" id="hfEmail" name="Email_ID" />
        <br /><br />
        <input type="submit" id="btnSubmit" value="Submit" />

    }

Table:
    <table id="table" class="table table-hover table-mc-light-blue">
        <thead>
            <tr>
                <th>Email</th>

                <th style="font-weight:400;">Add/Edit</th>
                <th style="font-weight:400;">Remove</th>

            </tr>
        </thead>
        <tbody>
            @foreach (var user in Model)
            {
                <tr>
                    <td style="padding:9px;letter-spacing:1px; ">@user.Email</td>
                    <td>
                        <a class="btn btn-primary" title="TILFØJ/REDIGER" style="background: #f5f5f5; color:black;" href="/User/UserEdit?Email=@user.Email"><i style="font-size:18px;" class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
                    </td>

                    <td>
                        <a class="btn btn-danger" title="SLETTE" href="/User/Delete?User=@user.Email" onclick="return confirm('Delete This Email?');"><i style="font-size:18px;" class="fa fa-trash-o" aria-hidden="true"></i></a>


                    </td>


                </tr>
            }

        </tbody>
    </table>
</div>

控制器：

public ActionResult Index()
{
    var Users = new DataContext().PX.ToList();

    return View(
    Users.Select(t => new user {Email = t.Email_ID 
   }).OrderByDescending(t=>t.Email).ToList());

}


    [HttpPost]
    public JsonResult AutoComplete(string prefix)
    {
        DataContext entities = new DataContext();
        var customers = (from customer in entities.PX
                         where customer.Email_ID.StartsWith(prefix)
                         select new
                         {
                             label = customer.Email_ID,
                             val = customer.Email_ID
                         }).ToList();

        return Json(customers);
    }