从文本框中没有按钮的Jquery自动完成表

时间:2012-02-17 17:13:18

标签: jquery json asp.net-mvc-3 jquery-ui

使用asp.net中的Pluralsight演示,我创建了自动完成文本框。我想将信息放在文本框中,并在文本框下方的表格中查看自动填充建议,而无需按下按钮。

我在MVC3中编写代码并使用MSSQL 2008数据库。

我怀疑我需要以某种方式合并这些功能,但我不知道如何

$(document).ready(function () {
$(":input[data-autocomplete]").each(function () {
    $(this).autocomplete({ source: $(this).attr("data-autocomplete") });
});

$("searchForm").each(function() {
    $.getJSON($(this).attr("action"),
        $(this).serialize(),
        function(data) {
            var result = $("#searchTemplate").tmpl(data);
            $("searchResults").empty()
                .append(result);
        }
    );
    return false;
}); })

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

你的问题很不清楚。看不到第一个和第二个脚本之间的任何关系。更不用说第二个似乎是错误的,因为没有<searchForm>有效的DOM元素,这就是你似乎正在循环的东西。

看起来您正在尝试通过在进行选择时提交包含自动填充文本框的表单来自动执行搜索。为此,您可以使用select事件:

$(":input[data-autocomplete]").each(function () {
    $(this).autocomplete({ 
        source: $(this).attr("data-autocomplete"),
        select: function(event, ui) {
            // a selection was made, here you could trigger the submission of the form
            // as if a submit button was pressed
            $(this).closest('form').trigger('submit');
        }
    });
});

当然,如果您希望此表单执行AJAX提交而不是常规回发,您可以使用Ajax.BeginForm而不是常规的Html.BeginForm。