0

我正在使用 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>
<% } %>
4

2 回答 2

2

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

于 2009-10-18T16:45:47.573 回答
0

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

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

    });
于 2009-10-18T22:08:54.717 回答