Question

我正在使用Ajax.BeginForm来更新网页上的数据（根据下面的代码）。无论如何，我可以在每个按键上点击后端服务器而不是等待按下提交按钮

这样，当我输入“a”时，它将查询“a”并显示所有数据结果，然后如果我输入“b”，它将过滤“ab”上的列表等等......

使用提交按钮的当前代码

 <%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

我建议查看jQuery Autocomplete插件。它完全符合您的要求，只需要您有一个响应其创建的查询的操作，并根据查询参数返回匹配集。它具有高度可配置性和经过良好测试。在您的情况下，您需要利用添加参数的功能，以使其使用多个搜索条件，如名字和姓氏。例如，使用姓氏作为主要自动填充，并将第一个名称字段中的任何字符作为查询的附加值发送。

Answer 2

我在文本框中有以下内容，然后检查按键，然后前往后端获取郊区列表。

    $("#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");

    });

asp.net-mvc ajax查询按键而不是提交按钮

2 个答案: