jQuery自动完成组件

Question

我正面临一个自动完成的奇怪问题.

首要问题:

根据此处的教程,只有已找到项目的第一个字母显示在自动完成项目列表中

这是一个例子:

我在调试时的动作

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

在渲染视图中,这是发生的事情:

用于自动完成此方案的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);
}

屏幕抓取