javascript - 通过我的 JSON 对象传递附加数据，该数据是从自动完成返回的

Question

我正在开发一个 ASP.NET MVC Web 应用程序。我有以下操作方法，它将返回 JSON 格式的标签编号，以显示为自动完成结果:-

public ActionResult AutoComplete(string term){
    var ad = repository.FindServer(term, true).OrderBy(p => p.Technology.Tag).Select(a => new { label = a.Technology.Tag }).ToList();
    return Json(ad, JsonRequestBehavior.AllowGet);
}

我的自动完成字段是:

<text>Search</text>
<input  placeholder="Search by Tag.." name="searchTerm" data-autocomplete-source= "@Url.Action("AutoComplete", "Rack")" type="text" class="searchmargin" />

但是我希望除了当前标签编号之外还能够传递其他数据，例如“创建的服务器名称和数据”，作为返回的 json 的一部分。但是要根据标签编号进行自动完成.

我正在寻找诸如 facebook 内部返回的自动完成结果之类的内容。如果你输入一个名字，你会得到这个人的网络信息和国家，这样你就可以知道我们想要哪个人。问候

编辑操作方法是:-

public ActionResult AutoComplete(string term){
    var tech = repository.AllFindTechnolog(term).ToList();
    var resources = repository.GetResources(tech.Select(a=>a.IT360ID.Value).ToArray(),false).ToList();
    var query = from techItems in tech
                join resourcesItems in resources
                on techItems.IT360ID.Value equals resourcesItems.RESOURCEID // join based on db2ID
                select new {  label = techItems.Tag, name=  resourcesItems.RESOURCENAME };

        return Json(query, JsonRequestBehavior.AllowGet);
}

Answer 1

我认为要获得您想要的功能，您需要使用 JavaScript 来实现，以便您可以访问 _renderItem功能。像这样的事情:

$(document).ready(function () {
    $.get('Rack/Autocomplete', function (data) {
        $('input[name="searchTerm"]').autocomplete({
            minLength: 0,
            source: data,
            create: function () {
                $(this).autocomplete('instance')._renderItem = function (ul, item) {
                    return $('<li>').append('<a>' + item.label + '<br>' + item.name + '<br>' + item.label + '</a>')
                                    .appendTo(ul);
                };
            }
        });
    });
});

可以看到它在这个 jsfiddle 中工作.

对于旧版本的 jQuery:

create: function () {
    $(this).data("ui-autocomplete")._renderItem = function (ul, item) {
        return $('<li>').append('<a>' + item.label + '<br>' + item.name + '<br>' + item.label + '</a>')
                        .appendTo(ul);
    };
}

或更早:

create: function () {
    $(this).data("autocomplete")._renderItem = function (ul, item) {
        return $('<li>').append('<a>' + item.label + '<br>' + item.name + '<br>' + item.label + '</a>')
                        .appendTo(ul);
    };
}