自动完成在 jQuery 中不起作用答案

【问题标题】：Autocomplete not working in jQuery自动完成在 jQuery 中不起作用
【发布时间】：2013-08-23 12:31:15
【问题描述】：

我正在尝试在 jQuery 自动完成中获取所有用户名，但它似乎根本不起作用。

控制器-

  public ActionResult Allusers(string Email) {
            if (ModelState.IsValid) {
               var allUser = (from us in db.SystemUsers
                           select new UserModel
                {
                Email=us.Email,
                UserId=us.UserId
                }).Distinct().ToArray();

                //   ViewBag.Team = allUser.OrderBy(x => x.Text);
                return Json(allUser,JsonRequestBehavior.AllowGet);
            }
            return View();
        }

脚本-

<script type="text/javascript">
    $(function () {
        $("input #autocomplete").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/AllUsers/AllUsers/',
                    type: "POST",
                    dataType: "json"

                });
            }
        });
    });
</script>

以下我正在使用的脚本-

<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>

但没有运气。

【问题讨论】：

“但它似乎根本不起作用”。它是否有效？如果没有，请给我们更多详细信息
@glautrou，不，它不起作用，我正在尝试从表中获取用户名列表

标签： asp.net-mvc-4 jquery-autocomplete

【解决方案1】：

如下尝试

<script type="text/javascript">
$(function () {
    var itemList = [];
    $("input #autocomplete").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '/AllUsers/AllUsers/',
                type: "POST",
                dataType: "json",
                Sucess: function(result) {
                    $.each(result, function (index, item) {
                         itemList.push({ label: item.Email, value: item.UserId});
                    });
                }
            });
        response(itemList);
        }
    });
});

【讨论】：

【解决方案2】：

需要定义成功函数并填写response参数

参考JQuery autocomplete remote json

【讨论】：

【解决方案3】：

我也陷入了困境，但是下面对我有用。在我的情况下，我的 json 结果是字符串数组，因此返回的数据没有列。

如果您使用的是 .cshtml 而不是 html，那么您必须在 bundle config 中添加/注册 javascript 和 css 文件在您的共享或各自的 cshtml 文件中呈现所需的文件。

在你的 cshtml 文件中添加以下行：

<input type='text' id='stockName'/>

以下部分非常棘手且重要：

 $(function () {
        $('#stockName').autocomplete({
            source: function (request, response) {
                $.getJSON("/EquityList/GetStockNames?term=" + request.term, function (data) {
                                            var realArray = $.makeArray(data)

                    response($.map(realArray, function (item) {
                        return {
                            value: item,
                            id: item
                        }
                    }))

                });
            },
            minLength: 3,
            delay: 0
        });
});

重要提示： 1）我们需要先将json数据格式化成数组 2）然后我们需要使用地图功能，这很好地将数据格式化为自动完成所需的格式。除非此数据格式化未完成，否则不会显示建议对话框 UI。

希望这个可以帮助其他开发人员。

【讨论】：