CODEWITHSUNDEEP
javascriptjqueryjsonautocompleteasp.net-mvc-5
John John
John John

Reputation: 1

Passing additional data through my JSON object,that is returned from the auto complete

I am working on an asp.net MVC web application. I have the following action method, which will return Tag numbers as JSON to be displayed as an autocomplete results, :-

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);
}

And my auto complete field is:

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

But I want to be able to pass additional data such as the “Server Name & Data created” in addition to the current tag number, to be part of the returned json.But to do the auto complete based on the tag number.

I am looking for something such as the auto complete result returned inside facebook . where if you type a name you will get the person networkinfo & Country, so that you can know which person we want to . Regards

edit the action method is:-

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);
}

Upvotes: 1

Views: 201

Answers (1)

sWW
sWW

Reputation: 597

I think to get the sort of functionality you are after you are going to need to do it with JavaScript so that you can access the _renderItem function. Something like this:

$(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);
                };
            }
        });
    });
});

Can see it working in this jsfiddle.

For older versions of 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);
    };
}

or even older:

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

Upvotes: 1

Related Questions