jQuery 自动完成组件

Question

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

第一期：

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

这是一个插图：

我在调试时的操作

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

在渲染视图中，会发生以下情况：

本场景自动补全的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 调用，它依赖于模型映射，而不是像上一个教程中那样发送 aq 和限制参数，正如我在许多其他教程中看到的那样，但是Ajax 调用没有触发，甚至没有给我一个错误。

我的这个场景的代码是基于这个Stack Overflow Answer

这是我的控制器和视图相关的代码：

        //[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 控制台视图：

我已经为第二种情况尝试了很多代码，其中大部分都是 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; }
    }

控制器动作

我必须添加 [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);
}

屏幕抓取