Question

我正在尝试使用MVC和Jquery。我已经定义了一个像<td>@Html.TextBox("SearchParam")</td>这样的文本框和我的脚本如下：

<script>
    $(document).ready(function () {

        $('#SearchParam').change(function () {
            var source = $.ajax({
                url: "/Search/SearchText",
                type: "post",
                async: false,
                data: { searchText: $('#SearchParam').val() },
                //success: function (result) {
                //    alert("Data");
                //}
            });

            $('#SearchParam').autocomplete({
                dataType: "json",
                source: source
            });
        });


    });
    //function onSearchParamChange(){
    //    var source = $.ajax({
    //        url: "/Search/SearchText",
    //        type: "post",
    //        async: false,
    //        data: { searchText: $('#SearchParam').val() },
    //        //success: function (result) {
    //        //    alert("Data");
    //        //}
    //    });

    //    $('#SearchParam').autocomplete({
    //        dataType: "json",
    //        source: source
    //    });
    //};

    $("#submitButton").click(function () {
       // var data = new FormData($("#searchFrm")[0]);
        $.ajax({
            url: "/Search/Search",
            type: "post",
            data: $("#searchFrm").serialize(),
            success: function (result) {
                $("#partialBody").html(result);
            }
        });
    }); </script>

你可以注意到我尝试使用onSearchParamChange（）函数也是通过定义文本框如下：

@Html.TextBox("SearchParam", null,new { @onchange = "onSearchParamChange();" })

但以下问题仍然存在： 1.文本更改时不会触发TextBox Change事件，而是在文本框失去焦点或模糊时触发。 2.即使焦点松散，数据也会正确返回，但自动完成功能不起作用。我正在使用MVC 3和jquery ui 1.8.20并在Chrome中进行测试.. 请帮助..

Answer 1

我看到三个问题：

在change事件触发之前，您的自动填充功能尚未设置，而是应在页面加载时初始化一次。
您没有正确定义远程数据源。重新阅读the documentation，并查看"multiple, remote" example，了解如何将函数传递给source属性。
“当文本被更改时，不会触发TextBox Change事件，而是在文本框失去焦点或模糊时触发它 - 这是按设计工作的。自己实现这个，你会想要使用keyup事件。但是自动完成插件会为您处理。

Answer 2

当您创建元素@Html.TextBox("SearchParam")时，您刚刚定义了元素名称，因此您将拥有<input name="SearchParam" type="text" />

之类的内容

你可以尝试这个@Html.TextBox("SearchParam", null,new { id="SearchParam" })

您应该使用onkeypress事件

    $('[name=SearchParam]').keypress(function (e) {
        var source = $.ajax({
            url: "/Search/SearchText",
            type: "post",
            async: false,
            data: { searchText: $('[name=SearchParam]').val() },
            //success: function (result) {
            //    alert("Data");
            //}
        });

        $('[name=SearchParam]').autocomplete({
            dataType: "json",
            source: source
        });
    });

OnChange和AutoComplete都不能使用HTML.TextBox

2 个答案: