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和limit参数，并且我已经在很多其他方面看到了教程，但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);
}

屏幕抓取