ASP.Net 웹 서비스를 사용하여 JQuery 자동 완성

Question

JQuery에서 호출되는 ASP.Net 웹 서비스가 있고 드롭 다운의 응답이 JSON 형식으로 제공됩니다. 아래는 조각

$(document).ready(function() { 
$("#txtTest").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      url: "Webservice.asmx/GetNames", 
      data: "{'prefix':'" + request.term + "'}", 
      dataType: "json", 
      async: true, 
      success: function (data){ 
       response($.map(data, function(item) 
       { 
/*Below commented return has to display the First item alone in JSON which fails*/ 
//return { label: item.First, value: item.First } 
/* Below return gives the JSON response with first and second*/ 
     return item ; 
       })); 
      }, 
      error: function (result) { 
       alert("Due to unexpected errors we were unable to load data"); 
      } 
     }); 
    }, 
    minLength:2 
}); 
}); 

그리고 자동 완성의 드롭에 JSON 응답이 온다 내가 (스티브, Evet, 스티븐스처럼)으로 혼자 "첫 번째"항목을 표시 할 방법

{"First":"Steve","Second":"AK"} 
{"First":"Evet","Second":"EV"} 
{"First":"Stevens","Second":"SV"} 

로 드롭 다운 자동 완성의 출력?

도와주세요!

Answer 1

"JSON 응답"은 설명했듯이 유효한 JSON이 아닙니다. 그것이 당신의 서비스가 돌아 오는 것이라면 틀린 것입니다. 이 텍스트는 3 개의 다른 Javascript 객체를 나타냅니다. 세 줄 중 하나만 있으면 유효한 JSON입니다. 모든 행을 연결 한 행은 유효한 JSON이 아닙니다.

이 세 가지 객체의 배열을 나타내는 유효한 JSON입니다 : 그래서 경우

{"First":"Steve","Second":"AK"} 
{"First":"Evet","Second":"EV"} 
{"First":"Stevens","Second":"SV"} 

:

이

[{"First":"Steve","Second":"AK"}, 
{"First":"Evet","Second":"EV"}, 
{"First":"Stevens","Second":"SV"} ] 

(공백은 중요하지 않습니다)

이 유효 JSON하지 않습니다 응답의 정확한 그림, 당신의 서비스는 부서진다. 먼저 문제를 해결 한 다음 해결할 수 있습니다.

---

당신이 적절한 형태로 응답을 얻을 후, 예를 들어,

[{"First":"Steve","Second":"AK"}, 
{"First":"Evet","Second":"EV"}, 
{"First":"Stevens","Second":"SV"} ] 

을 ... 다음 결과를 표시 할 수 있습니다. 그러나 배열의 각 항목의 첫 번째 요소 만 표시하려고합니다. 그렇게하기 위해 원래 배열을 다른 배열 인 객체 배열이 아닌 문자열 배열에 매핑해야합니다. 이를 위해 jQuery map() 함수를 사용할 수 있습니다. 반환 된 데이터

성공 기능에서

$.map(realArray, function(val, i) { ...map one item here... }); 

는,이처럼 사용하십시오 : 그것은 다음과 같습니다

 success: function (data){  
      response($.map(data, function(item) { 
       return item.First; 
      })); 
     }, 

각 항목에 대해 한 번,지도에 의해 호출되는 함수 원래 아랩은 {"First":"Steve","Second":"AK}과 같은 항목을 "Steve"과 같은 항목으로 변환합니다.

[{"First":"Steve","Second":"AK"}, 
{"First":"Evet","Second":"EV"}, 
{"First":"Stevens","Second":"SV"} ] 

같이 전체 어레이 $.map() 호출 용맹 출력 ["Steve", "Evet", "Stevens"]이다. 이 결과는 자동 완성 위젯에 항목 목록을 표시하는 응답 함수로 전달됩니다.

Answer 2

동일한 문제가 있었는데 쿼리의 NULL 값을 빈 문자열로 바꾸어서 문제를 해결했습니다. 당신이 그것을 설명한대로, ...