自动完成功能无法在jQuery中运行

时间:2013-08-23 12:31:16

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

我试图让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>

但没有运气。

3 个答案:

答案 0 :(得分:0)

您需要定义成功功能并填写响应参数

请参阅JQuery autocomplete remote json

答案 1 :(得分:0)

尝试以下

<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 :(得分:0)

我也被困在这里,但下面对我有用。 在我的情况下,我的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)然后我们需要使用map函数,这样就可以将数据格式化为自动完成所需的格式。除非未完成此数据格式化,否则不会显示建议对话框UI。

希望这个能帮助其他开发者。