可变长度列表中的jquery自动完成

Question

尝试使用 Sanderson begincollectionitems 方法弄清楚如何执行此操作，并希望使用自动完成功能，每行包含一个字段。

我想我看到如何使用自动填充添加行，但不确定使用guid呈现的现有行的方法。

每行都有一个字段，用户可以选择指向另一个表中的记录。每个自动完成都需要处理html元素idfield_guid。

我正在想象使用jquery枚举元素并为每个元素添加自动完成，目标是该行的唯一字段。另一个想法是正则表达式，可能允许您枚举字段并在循环中为每个字段添加自动完成，其中自动处理唯一字段ID。

听起来合理吗？或者你能说出正确的方法吗？对页面上的自动完成次数有合理的限制吗？谢谢你的任何建议！

编辑，这是我帮助后的内容。 data-jsonurl显然没有被jquery选中，因为它正在对主页的url执行html请求。

    $(document).ready(function () {
        var options = {
            source: function(request, response) {
                $.getJSON($(this).data("jsonurl"), request, function (return_data) {
                    response(return_data.itemList);
                });
            },
            minLength: 2
        };

        $('.ac').autocomplete(options);
    });

    <%= Html.TextBoxFor(
    x => x.AssetId, 
    new { 
        @class = "ac",
        data_jsonurl = Url.Action("AssetSerialSearch", "WoTran", new { q = Model.AssetId }) 
    }) 
%>     

发出的HTML看起来对我好：

    <input class="ac" data-jsonurl="/WoTran/AssetSerialSearch?q=2657" id="WoTransViewModel_f32dedbb-c75d-4029-a49b-253845df8541__AssetId" name="WoTransViewModel[f32dedbb-c75d-4029-a49b-253845df8541].AssetId" type="text" value="2657" />     

控制器还不是一个因素，在萤火虫中我收到这样的请求：

http://localhost:58182/WoReceipt/Details/undefined?term=266&_=1312892089948

似乎正在发生的事情是$（this）没有返回html元素，而是返回jquery自动完成小部件对象。如果我在'element'下钻取firebug中的属性，我最终会看到data-jsonurl，但它不是$（this）的属性。这是console.log（$ this）：

Answer 1

您可以使用jQuery UI Autocomplete插件。只需将一些知道类应用于需要自动完成功能的所有字段以及另外的HTML5 data-url属性以指示外键：

<%= Html.TextBoxFor(
    x => x.Name, 
    new { 
        @class = "ac", 
        data_url = Url.Action("autocomplete", new { fk = Model.FK }) 
    }) 
%> 

然后附加插件：

var options = {
    source: function(request, response) {
        $.getJSON($(this).data('url'), request, function(return_data) {
            response(return_data.suggestions);
        });
    },
    minLength: 2
});

$('.ac').autocomplete(options);

最后我们可以让一个控制器操作接受两个参数（term和fk），它们将返回给定术语和外键的JSON数组建议。

public ActionResult AutoComplete(string term, string fk)
{
    // TODO: based on the search term and the foreign key generate an array of suggestions
    var suggestions = new[]
    {
         new { label = "suggestion 1", value = "suggestion 1" },
         new { label = "suggestion 2", value = "suggestion 2" },
         new { label = "suggestion 3", value = "suggestion 3" },
    };
    return Json(suggestions, JsonRequestBehavior.AllowGet);
}

您还应该为新添加的行附加自动完成插件。