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

【问题标题】：asp.net-mvc ajax query on keypress rather than submit buttonasp.net-mvc ajax 查询按键而不是提交按钮
【发布时间】：2009-10-18 16:39:45
【问题描述】：

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

【问题讨论】：

标签： asp.net-mvc ajax keypress

【解决方案1】：

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

【讨论】：

如果我使用自动完成，我最终不必选择一项，我希望允许人们输入部分值，以便我可以在服务器上进行“喜欢”查询。 jquery autocomplete 会阻止我允许部分条目吗？
不，您可以继续在该字段中输入文本，并且它不需要与所选选项之一匹配。这由 mustMatch 选项控制，默认为 false。

【解决方案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");

    });

【讨论】：