jQueryUI + ASP json 데이터로 .NET MVC 자동 완성

Question

jQueryUI 자동 완성으로 JSON을 호출하는 데 큰 문제가 있습니다. 나는이 매우 간단 JS 있습니다

$(document).ready(function() { 
    $('#Editor_Tags').autocomplete({ 
     source: "/Forums/Ajax/GetTags", 
     focus: function() { 
      // prevent value inserted on focus 
      return false; 
     }, 
     select: function (event, ui) { 
      var terms = split(this.value); 
      // remove the current input 
      terms.pop(); 
      // add the selected item 
      terms.push(ui.TagName); 
      // add placeholder to get the comma-and-space at the end 
      terms.push(""); 
      this.value = terms.join(", "); 
      return false; 
     } 
    }); 
}); 

을 그리고 이것은 내가 반환하기 위해 노력하고있어 모델 :

public class TagView 
{ 
    public int TagId { get; set; } 
    public string TagName { get; set; } 
    public int Weight { get; set; } 
} 

그러나이 주요 문제가 아니다. 주요 문제는 입력을 시작할 때 jQuery가 컨트롤러에 요청을하지 않는다는 것입니다. 나는 100 % 확실하다. specifiedied URL이 좋다./Forums/Ajax/GetTags를 입력하여 컨트롤러에 수동으로 액세스 할 수 있기 때문에 용어 = 텍스트 그리고 결과가 표시됩니다. jQuery와 jQUI의 newset 버전을 Google의 CDN에 직접 사용하고 있습니다.

Answer 1

jQueryUI 자동 완성 위젯 source 파라미터 데이터는 다음의 요건을 충족 할 것으로 예상 :

[...]는 문자열의 간단한 배열하거나 함께 상기 배열의 각 항목에 대한 개체를 포함 레이블 또는 값 속성 또는 둘 다.

이

public class TagView 
{ 
    public string Label { get; set; } 
    public string Value { get; set; } 
} 

변경 자동 완성 위젯의 source 매개 변수가 될 수 :

1. 변경이 JSON으로 직렬화하고있는 뷰 모델은 이러한 요구 사항을 충족 :

그래서 두 가지 옵션이 있습니다 함수를 사용하여 AJAX 호출을 직접 수행하고 데이터 형식을 적절히 지정하십시오.

$("#Editor_Tags").autocomplete({ 
    source: function (request, response) { 
     $.getJSON("/Forums/Ajax/GetTags", { term: request.term }, function (data) { 
      response($.map(data, function (el) { 
       return { 
        label: el.TagName, 
        value: el.TagId 
       }; 
      })); 
     }); 
    }, 
    /* other autocomplete options */ 
}); 

서버에서 반환 된 데이터가 TagView 개체의 JSON 배열이라고 가정합니다.

두 번째 코드는 테스트되지 않았지만 적어도 올바른 방향으로 가야합니다.

Answer 2

이 코드 작업을 가지고있다 : essentialy 앤드류 게시 한 것과 그 diffrent하지

$('#Editor_Tags').autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "/Forums/Ajax/GetTags", 
      dataType: "json", 
      data: { 
       term: request.term 
      }, 
      success: function (data) { 
       response($.map(data, function (item) { 
        return { 
         label: item.TagName, 
         value: item.TagName 
        } 
       })); 
      } 
     }); 
    } 

}); 

합니다.