asp.net - jQuery 自动完成组件

Question

我在自动完成方面遇到了一个奇怪的问题。

第一期:

根据教程找到here ，自动完成项目列表中仅显示找到的项目的第一个字母

这是一个例子:

我在调试时的操作

返回的虚拟数据，无论搜索模式如何，始终相同，仅用于测试

在渲染 View 中，会发生以下情况:

此场景自动完成的 Javascript 如下:

$("#Email").autocomplete('@Url.Action("FindEmail", "Administration")',
{
    dataType: 'json',

    parse: function(data) {
        var rows = new Array();

        for (var i = 0; i < data.length; i++) {

            rows[i] = {
                data: data[i].Value,
                value: data[i].Value,
                result: data[i].Value
            };
        }

        return rows;

    },
    width: 300,
    minLength: 3,
    highlight: false,
    multiple: false
        });

第二期:

我已经更改了代码，以便使用更舒适的 Ajax 调用，该调用依赖于模型映射，而不是像上一个教程中那样发送 q 和 limit 参数，以及我在许多其他教程中看到的那样，但是Ajax 调用没有触发，甚至没有给我一个错误。

我针对此场景的代码基于此 Stack Overflow Answer

这是我的 Controller 和 View 相关代码:

        //[HttpPost]
        [SpecializedContextFilter]
        [Authorize]
        [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
        public JsonResult FindEmail(RegistrationModel model) //Notice the use of model instead of string q and string limit
        {
            //Just a dummy implementation 
            var rez = new List<ValueModel>
            {
                new ValueModel {Description = "atest1@test.com", Value = "atest1@test.com"},
                new ValueModel {Description = "atest2@test.com", Value = "atest2@test.com"},
                new ValueModel {Description = "atest3@test.com", Value = "atest3@test.com"},
                new ValueModel {Description = "atest4@test.com", Value = "atest4@test.com"}

            };

            //var retValue = rez.Select(r => new { email = r.Value }).OrderBy(x => x).Take(10);

            //return Json(retValue, JsonRequestBehavior.AllowGet);

            return Json(rez, JsonRequestBehavior.AllowGet);
        }

查看 JavaScript:

    $("#Email").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '@Url.Action("FindEmail", "Administration")',
                type: "POST",
                dataType: "json",

                data: { email: $("#Email").val(), conferenceId: $("#ConferenceId").val() },

                success: function(data) {
                    response($.map(data, function(item) {
                        return { label: item.Value, value: item.Value, id: item.Value };
                    }));
                },
                select: function(event, ui) {
                    $("input[type=hidden]").val(ui.item.id);
                }
            });
        }
    });

Firefox 控制台 View :

对于第二种情况，我尝试了很多代码，其中大部分都是 Stack Overflow 的答案，但没有任何反应!

我缺少什么吗？

注意:包含 jQuery 插件，Ajax 已经在同一页面中工作，所以我不确定问题是什么

感谢您的帮助。

Answer 1

这是一个完整的工作示例，请参阅屏幕截图。

这些是我为使第二个示例正常工作而采取的步骤。

脚本引用/标记/Js

<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<input id="ConferenceId" value="1" />
<div class="ui-widget">
  <label for="Email">Email: </label>
  <input id="Email">
</div>
<script type="text/javascript">
    $("#Email").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("FindEmail", "Administration")',
                type: "POST",
                dataType: "json",

                data: { email: $("#Email").val(), conferenceId: $("#ConferenceId").val() },

                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.Value, value: item.Value, id: item.Value };
                    }));
                },
                select: function (event, ui) {
                    $("input[type=hidden]").val(ui.item.id);
                }
            });
        }
    });
    </script>

模型

    public class RegistrationModel
    {
        public string Email { get; set; }
        public string ConferenceId { get; set; }
    }

    public class ValueModel
    {
        public string Description { get; set; }
        public string Value { get; set; }
    }

Controller 操作

我必须添加 [HttpPost] 属性。

[HttpPost]
public JsonResult FindEmail(RegistrationModel model) //Notice the use of model instead of string q and string limit
{
    //Just a dummy implementation 
    var rez = new List<ValueModel>
    {
        new ValueModel {Description = "atest1@test.com", Value = "atest1@test.com"},
        new ValueModel {Description = "atest2@test.com", Value = "atest2@test.com"},
        new ValueModel {Description = "atest3@test.com", Value = "atest3@test.com"},
        new ValueModel {Description = "atest4@test.com", Value = "atest4@test.com"}

    };

    return Json(rez, JsonRequestBehavior.AllowGet);
}

屏幕抓取