0

我正在尝试使用 ajax 自动完成语法让状态代码后跟破折号和状态名称。我正在使用 jQuery 和 jQueryUI 以及 jQueryUI 自动完成功能来尝试这个。

我正在使用这个 json 结果：

[{"code":"AK","name":"Alaska"},{"code":"AL","name":"Alabama"},
{"code":"AR","name":"Arkansas"},{"code":"AZ","name":"Arizona"},
{"code":"CA","name":"California"}, ... ]

我正在使用这个带有嵌入式的 jQuery ajax 调用

   $.ajax({
        url: '/Cats/State/List',
        type: 'POST',
        dataType: 'json',
        success: function (data) {
            $('#Cat_stateCode').autocomplete(
            {
                source: data.code + '-' + data.name,
                minLength: 2
            });
        }
    });

mvc 控制器 JSON 结果如下所示：

    public JsonResult List()
    {
        return Json(db.States.ToList(), JsonRequestBehavior.AllowGet);
    }

如何让自动完成显示：CA - California CO - Colarado

如果我输入 C? 还是自动完成功能仅适用于像 {"AK"、"AL"、"AR" ... } 这样的简单 json？

4

1 回答 1

0

弄清楚了：

$("#Cat_stateCode").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Cat/States/List",
            dataType: "json",
            data: {
                style: "full",
                maxRows: 12,
                req_state_part: request.term
            },
            success: function (data) {
                response($.map(data, function (item) {
                    return {
                        label: item.code + ' - ' + item.name,
                        value: item.code
                    }
                }));
                //                            alert("data.code:" + data);
            },
            error: function (e) {
                alert("e.error:" + e.error);
            }
        });
    },

    minLength: 1,
    select: function (event, ui) {
        //alert("ui item:" + ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value);  //todo: remove after dev 
    },

    open: function () {
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },

    close: function () {
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    }
});

在我的 mvc CatStateController 我有这个：

public JsonResult List(String stateAbbreviation)
{
    String StateNameORStateCodeContains = Request.Params["req_state_part"];
    return Json(db.States.Where(state => state.name.Contains(StateNameORStateCodeContains) || state.code.Contains(StateNameORStateCodeContains)).ToList(), JsonRequestBehavior.AllowGet);
}

所以看起来它没有发送术语，它只发送你在数据元素中组成的一些参数。由于您几乎可以制作任何东西，这取决于开发人员的想象力。我想做的一件事是创建一个闭包 b/c 我有很多不同状态的不同动物。我需要为它们中的每一个创建相同的自动完成功能。所以我需要问另一个问题，如何删除自动完成功能，以便我可以从许多不同的 id 调用相同的函数，或者我只是用逗号将它们分开，如下所示：$("#Cat_stateCode,#Dog_stateCode,#Penguin_stateCode ...").autocomplete({ ... ???

我相信第二部分的答案就在这里。我认为它暗示只是向适用的输入标签添加一些类或属性，然后对它们执行每个，最后在每次迭代发生后立即将自动完成应用于 $(this).autocomplete。

只需将输入标签设置为具有 class="cssClassName" 即可找到更好的方法。不得不使用 TextBoxFor：

@Html.TextBoxFor(model => model.Cat.stateCode,  new { @class = "StateCodeAutoComplete" })
于 2013-07-31T23:01:02.947 回答