0

我正在尝试使用 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. 即使它失去焦点，数据也会正确返回，但是自动完成不起作用..我正在使用带有 jquery ui 1.8.20 的 MVC 3 并在 Chrome 中进行测试..请帮助..

4

2 回答 2

1

我看到三个问题：

  1. 在事件触发之前不会设置您的自动完成功能change，而是应该在页面加载时初始化一次。

  2. 您没有正确定义远程数据源。重新阅读文档，并查看“多个远程”示例，了解如何将函数传递给源属性。

  3. “文本更改时不会触发 TextBox Change 事件，而是在文本框失去焦点或模糊时触发” - 这是按设计工作的。自己实现这个，你会想要使用这个keyup事件。但是自动完成插件会为你处理。

于 2013-08-30T13:07:57.690 回答
1

当您创建元素时，@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
        });
    });
于 2013-08-30T13:07:58.283 回答