Автозаполнение: отображение результатов с данными json

Question

Я пытаюсь создать автозаполнение, но у меня есть проблемы с исправлениями по частям.

Во-первых, на мой взгляд, включают это поле:

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

Очень простой. Далее, Javascript вызов:

<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> 

Что вызывает этот метод:

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

Если я вставить слово "Power", данные в формате JSON размещен обратно, как это:

{"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} 

Для справочной цели здесь приведены два сценария, которые запускаются:

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

Однако ничего не отображается. Мне бы хотелось, чтобы результаты отображались как обычный автозаполнение. Может ли кто-нибудь помочь мне заставить все работать?

EDIT

Я работаю над этим некоторое время. Я опубликовал там новый javascript, метод контроллера и полученные результаты. Но все еще не работает, и я был бы признателен за любую помощь.

Answer 1

Наконец-то! После перерыва я получил свой ответ.

Посмотрите?

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

Как это происходит, я строила Json объект другого Json объекта. Вот почему данные не были переданы должным образом.

Я восстановил метод, сделал его работу, и рафинированное это так:

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

И мой Javascript действия:

<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> 

А теперь все работает как шарм.

Answer 2

для автозаполнения, я использую класс javascriptserializer. код выглядит примерно так.

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 

В основном просто берет данные, добавляет к массиву ряд объектов, а затем сериализует его.