通过我的JSON对象传递其他数据,该数据从自动完成返回

时间:2014-08-01 10:21:51

标签: javascript jquery json autocomplete asp.net-mvc-5

我正在开发一个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" />

但我希望能够传递其他数据,例如“服务器名称&amp;创建的数据“除了当前标签号外,还是返回的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);
}

1 个答案:

答案 0 :(得分: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);
    };
}