2013-01-25 3 views
1

Ajax를 사용하기 위해 Select2를 설정하려고하는데 오히려 막혔습니다. 나는 IE에서 디버깅을했고 내 AJAX가 결과를 반환한다는 것을 확인 했으므로 문제가되지 않습니다. 입력 상자가로드되지만 '우유'라는 단어에 '마일'을 입력하면 '검색 중 ...'이라고 표시되고 아무 것도 찾지 못합니다! 여기 AJAX 결과 문제 - Data.Results가 정의되지 않았습니다.

내 JQuery와 있습니다 :

 $(document).ready(function() { 
      $('#e1').select2({ 
       placeholder: "Select an ingredient...", 
       minimumInputLength: 2, 
       ajax: { 
        url: "../api/IngredientChoices", 
        dataType: "jsonp", 
        quietMillis: 500, 
        data: function (term, page) { 
         return { 
          q: term, 
          page_limit: 10, 
          page: page 

         }; 
        }, 
        results: function (data, page) { 
         var more = (page * 10) < data.total; 
         return { 
          results: data.MainName, more:more 
         } 

        } 
       } 
      }); 
     }); 

JSON :

[{"SubItemID":1,"MainItemID":1,"SubName":"2%","MainName":"Milk"},{"SubItemID":2,"MainItemID":1,"SubName":"Skim/Fat Free","MainName":"Milk"},{"SubItemID":3,"MainItemID":2,"SubName":"Chedder","MainName":"Cheese"}] 

HTML :

<td><input type="hidden" id="e1" /></td> 

난 그냥 JSON가되도록 데이터 유형을 변경하면 나는 오류의 다른 종류를 얻을 수 상자에 "mi"라고 입력하면

enter image description here

다음은 작업 버전에 대한 최종 코드 :

  $('#e1').select2({ 
       placeholder: "Select an ingredient...", 
       minimumInputLength: 2, 
       ajax: { 
        url: "../api/IngredientChoices", 
        dataType: "json", 
        quietMillis: 500, 
        data: function (term, page) { 
         return { 
          q: term, 
          page_limit: 10, 
          page: page 

         }; 
        }, 
        results: function (data, page) { 
         var more = (page * 10) < data.length; 
         console.log(more); 
         console.log(data); 
         return { results: data, more: more }; 

        }, 
        formatResult: function (post) { 
         markup = '<strong>' + post.text + '</strong>'; 
        } 
       } 
      }); 
+0

JSONP 나가는 아약스 호출입니다 .../API는/IngredientChoices 로컬입니다 그렇다면 데이터 유형 JSON 만 필요합니다. –

+0

아, JSON과 JSONP의 차이점을 잘 모르겠습니다. JSON을 사용하면 첨부 된 스크린 샷에서 오류가 발생합니다. – Yecats

답변

4

당신 때문에 당신이 얻고있는 결과의 형식으로 나타납니다 발생한 오류입니다. Select2는 id : 및 text : 특성을 가진 개체의 컬렉션으로 예상되는 결과입니다.

은 [{ID : 텍스트 1 : '문자열'}, {ID : 2, 텍스트 : '. 다른 문자열'}]

+0

맞습니다. ID와 텍스트를 포함하도록 JSON 출력을 변경해야합니다. 또한 결과를 데이터로 변경해야했습니다. 위의 수정 된 코드를 다른 사람들에게 게시했습니다. – Yecats

+0

json 필드 이름이 텍스트로 어떻게 변경 되었습니까 ?? 필드 이름 ('이메일') 중 하나를 '텍스트'로 변환 할 수 없다는 점을 제외하고 비슷한 문제가 발생했습니다. – user3115056