2014-01-14 4 views
3

메신저 http://jqueryui.com/autocomplete/#custom-data 메신저 및 C# 및 면도기 중 하나가 선택 될 때마다 자동 완성 텍스트 상자 3 개를 시도해주세요.자동 완성 기능을 위해 Jquery와 병합하여 면도기

그래서 partno를 ​​입력하고 드롭 다운 목록에서 하나를 선택하면 항목 이름, desc 및 ID가 채워집니다. 그리고 다른 필드에 입력하면 같은 것입니다.

내가 클래스를 생성

var varItems = new List<Item>(); 
      varItems = db.Items.Select(tbl => new Item 
        { 
          ID = tbl.ID, 
          Name = tbl.Name, 
          PartNo = tbl.PartNo, 
          Description = tbl.Description 
        }).ToList(); 

의 항목 목록에 넣어 한 후 전송이보기

$("#Name").autocomplete({ 
     minLength: 0, 
     source: @ViewBag.Items, 
     focus: function(event, ui) { 
      $("#Name").val(ui.item.label); 
      return false; 
     }, 
     select: function(event, ui) { 
      $("#Name").val(ui.item.Name); 
      $("#PartNo").val(ui.item.PartNo); 
      $("#Description").html(ui.item.Description); 
      return false; 
     } 
    }); 

에서

ViewBag.Items = var.items; 

다음 viewbag에서 그러나 그것은 거기에있는 뷰 백과 같지 않습니다. 내가 언젠가 아래처럼 뭔가를 생산하는 일종의 루프를해야 겠어?

var projects = [ 
     { 
     value: "jquery", 
     label: "jQuery", 
     desc: "the write less, do more, JavaScript library", 
     icon: "jquery_32x32.png" 
     }, 
     { 
     value: "jquery-ui", 
     label: "jQuery UI", 
     desc: "the official user interface library for jQuery", 
     icon: "jqueryui_32x32.png" 
     }, 
     { 
     value: "sizzlejs", 
     label: "Sizzle JS", 
     desc: "a pure-JavaScript CSS selector engine", 
     icon: "sizzlejs_32x32.png" 
     } 
    ]; 

그렇다면 위 목록을 작성하려면 어떻게해야합니까?

source: @Html.Raw(Json.Encode(@ViewBag.Items)); 

이 JSON에 항목을 인코딩 할 것이며, 그것을 작동합니다 :

고마워

답변

2

이 시도.

+0

이름 입력란에 빈 드롭 다운이 표시되는 이유는 무엇입니까? – AlexW

+0

아마도 다른 오류 일 수 있습니다. json이 올바르게 생성되었는지 확인할 수 있습니까? HTML 소스를 확인하십시오. –

+0

내가 좋아 보인다 : source : [{ "ID": 1, "Name": "HP DL360p", "PartNo": "670638-425", "Description": ""}, { "ID": 2, "Name": "Samsung 840 Pro 256GB", "PartNo": "", "Description": "256GB SSD"}] – AlexW