AJAX 자동 완성이 json과 작동하지 않습니다.

이것이 작동하지 않는 이유를 아는 사람이 있습니까? 서버에서 JSON을 올바르게 반환하고 있습니다. 여기의 예 : http://www.mediaworks.cc/test/sandbox2.aspx AJAX 자동 완성이 json과 작동하지 않습니다.

왼쪽 텍스트 상자는 자동 완성입니다. 오른쪽 텍스트 상자는 자동 완성에서 항목을 클릭하면 채워집니다.

<!DOCTYPE html> 
<html> 
<head id="Head1" runat="server"> 
    <title></title> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $(".autosuggest").autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         type: "POST", 
         contentType: "application/json; charset=utf-8", 
         url: "Sandbox2.aspx/GetPackages", 
         data: "{'term':'" + document.getElementById('txtPackage').value + "'}", 
         dataType: "json", 
         success: function (data) { 
          response($.map(data, function (item) { 
           return { 
            label: item.HotelPackage, 
            value: item.ID 
           }; 
          })); 
         } 
        }); 
       }, 
       select: function (event, ui) { 
        document.getElementById('selectedValue').value = ui.item.HotelPackage; 
       } 
      }); 
     }) 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <asp:TextBox ID="txtPackage" runat="server" CssClass="autosuggest"></asp:TextBox> 
     <asp:TextBox ID="selectedValue" runat="server"></asp:TextBox> 
    </form> 
</body> 
</html>

출처

2013-10-15 Luciano Lipari

'HTTP 바로 확인하십시오 : // www.mediaworks.cc/테스트/Sandbox2.aspx/GetPackages' 아무것도 – Praveen

을 반환하지 않습니다 난 당신이 잘못된 링크를 생각합니다./GetPackages를 삭제하십시오 : http://www.mediaworks.cc/test/Sandbox2.aspx. 보고 주셔서 감사합니다! –

아니, 어디서 JSON을 얻는거야? 링크? – Praveen

귀하의 id 및 class이 같은 요소를 참조하고 다음은

는 코드입니다. 텍스트 상자

$(".autosuggest").autocomplete({

그리고 데이터 부분을 .autosuggest하는 자동 완성을 할당

<asp:TextBox ID="txtPackage" runat="server" CssClass="autosuggest">

도 잘못 같은 요소

data: "{'term':'" + document.getElementById('txtPackage').value + "'}",

모두 동일을 참조한다.

확실히 data 부분은

출처

2013-10-15 04:31:40 Praveen

도와 주셔서 감사합니다. 나는 클래스를 제거하고 다음과 같은 ID를 사용하여이를 참조하고있다 : $ ("# txtPackage"). 자동 완성 ({나는 당신이 의미하는 바가 무엇인지 모르겠다. 다시 한번 감사드립니다 . –

다른 아이디어? –

AJAX 자동 완성이 json과 작동하지 않습니다.

답변

관련 문제