Autocomplete: display results with json data

Question

I am trying to build an autocomplete, but I have troubles patching along the parts.

First, my view include this field:

<p>@Html.TextBoxFor(_item => _item.mCardName, Model.mCardName, new { @class = "cardText", id = "card_name"} )  </p>

Very simple. Next, the javascript call:

<script type="text/javascript">
    $(function() {
        $('#card_name').autocomplete({
            minlength: 5,
            source: "@Url.Action("ListNames", "Card")",
            select: function (event, ui) {
                $('#card_name').text(ui.item.value);
            },
        });
    });
</script>

Which calls this method:

public ActionResult ListNames(string _term)
{
    using (BlueBerry_MTGEntities db = new BlueBerry_MTGEntities())
    {
        db.Database.Connection.Open();

        var results = (from c in db.CARD
                   where c.CARD_NAME.ToLower().StartsWith(_term.ToLower())
                   select new {c.CARD_NAME}).Distinct().ToList();

        JsonResult result = Json(results.ToList(), JsonRequestBehavior.AllowGet);

        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

If i insert the "Power" word, the JSON data is posted back like this:

{"ContentEncoding":null,"ContentType":null,"Data":[{"CARD_NAME":"Power Armor"},{"CARD_NAME":"Power Armor (Foil)"},{"CARD_NAME":"Power Artifact"},{"CARD_NAME":"Power Conduit"},{"CARD_NAME":"Power Conduit (Foil)"},{"CARD_NAME":"Power Leak"},{"CARD_NAME":"Power Matrix"},{"CARD_NAME":"Power Matrix (Foil)"},{"CARD_NAME":"Power of Fire"},{"CARD_NAME":"Power of Fire (Foil)"},{"CARD_NAME":"Power Sink"},{"CARD_NAME":"Power Sink (Foil)"},{"CARD_NAME":"Power Surge"},{"CARD_NAME":"Power Taint"},{"CARD_NAME":"Powerleech"},{"CARD_NAME":"Powerstone Minefield"},{"CARD_NAME":"Powerstone Minefield (Foil)"}],"JsonRequestBehavior":0,"MaxJsonLength":null,"RecursionLimit":null}

For reference purpose, here are two of the scripts that run:

<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

However nothing is displayed. I would have liked to see the results displayed like a normal autocomplete would do. Can anyone help me out making things work?

EDIT

I have been working on this for a while. I have posted up there the new javascript, controller method and results obtained. But the thing still does not work and I would appreciate any help.

Answer 1

for autocompletes, i use the javascriptserializer class. the code goes something like this.

My.Response.ContentType = "application/json"
Dim serializer As JavaScriptSerializer = New JavaScriptSerializer
Dim dt As DataTable = GetDataTable("proc_name", My.Request.QueryString("term"))
Dim orgArray As ArrayList = New ArrayList
For Each row As DataRow In dt.Rows
    Dim thisorg As New thisOrg
        thisorg.id = row("organization_child_id")
        thisorg.value = row("organization_name")
        orgArray.Add(thisorg)
Next
My.Response.Write(serializer.Serialize(orgArray))

Public Class thisOrg
    Public id As Integer
    Public value As String
End Class

basically just takes a datatable, adds a series of objects to the array, then serializes it.

Answer 2

Finally! After taking a break, I got my answer.

See this?

public ActionResult ListNames(string _term)
{
    using (BlueBerry_MTGEntities db = new BlueBerry_MTGEntities())
    {
        db.Database.Connection.Open();

        var results = (from c in db.CARD
                   where c.CARD_NAME.ToLower().StartsWith(_term.ToLower())
                   select new {c.CARD_NAME}).Distinct().ToList();

        JsonResult result = Json(results.ToList(), JsonRequestBehavior.AllowGet);

        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

As it happens, I was building a Json object OF another Json object. So that's why the data was not passed properly.

I've rebuilt the method, made it work, and refined it like this:

public JsonResult ListCardNames(string term)
{
    using (BlueBerry_MagicEntities db = new BlueBerry_MagicEntities())
    {
        db.Database.Connection.Open();

        var results = from cards in db.V_ITEM_LISTING
                      where cards.CARD_NAME.ToLower().StartsWith(term.ToLower())
                      select cards.CARD_NAME + " - " + cards.CARD_SET_NAME;

        JsonResult result = Json(results.ToList(), JsonRequestBehavior.AllowGet);

        return result;
    }

And my javascript action:

<script type="text/javascript">
    $(function() {
        $('#searchBox').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "@Url.Action("ListCardNames")",
                    type: "GET",
                    dataType: "json",
                    data: { term: request.term },
                    success: function(data) {
                        response($.map(data, function(item) {
                            return { label: item, value1: item };
                        }));
                    }
                });
            },
            select:
                function(event, ui) {
                    $('#searchBox').val(ui.item);
                    $('#cardNameValue').val(ui.item);
                    return false;
                },
            minLength: 4
        });
    });
</script>

And now everything works like a charm.