OnChange 和 AutoComplete 都不适用于 Html.TextBox答案

【问题标题】：OnChange and AutoComplete both not working withHtml.TextBoxOnChange 和 AutoComplete 都不适用于 Html.TextBox
【发布时间】：2013-08-30 12:50:54
【问题描述】：

我正在尝试使用 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 中进行测试。请帮忙..

【问题讨论】：

标签： jquery asp.net-mvc

【解决方案1】：

我看到三个问题：

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

【讨论】：

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

【讨论】：