2013-03-24 5 views
1

이 JQuery AJAX를 웹 페이지에 표시하는 데 문제가 있습니다.JQuery 자동 완성 페이지에 표시되지 않음

$(document).ready(function(e) { 
    $(".autocomp").autocomplete(
     { 
      source: function(request, response) { 
         $.ajax({ 
           url: "/apples", 
           dataType: "json", 
           data: { 
           srch:request.term 
           }, 
           success: function(data) { 
            response($.map(data.result, function(item) { 
             return { 
              label: item.name,  
              value: item.name, 
              data: item 
             }; 
            })); 
           } 
          }); 
        }, 
        minLength: 2, 
        select: function(event, ui){ 
            var parts = this.name.match(/(\D+)(\d+)$/); 
            $("key_"+parts[2]).val(ui.item.data.key); 
           } 
        }); 
}); 

이 함수는 {result: [{name:macintosh,key:1},{name:golden,key:2},{name:fuji,key:3}]} 정보를 반환하는 웹 사이트를 호출합니다. 데이터 필드에 다시 전송 오브젝트는 다음과 같습니다

Object {result= [Object{name:macintosh,key:1},Object{name:golden,key:2},Object{name:fuji,key:3}]} 

html로 :

<input type="text" name="name_1" id="name_1" class="autocomp"><input type="hidden" name="key_1" id="key_1"> 

누구나가 작동하지 않는 이유는 아이디어가? 나는

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> 

와 스타일 시트를 수입하고 있습니다 :

<link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 

어떤 도움도 대단히 감사하겠습니다!

+0

당신은 jquery를 연결하고있는 곳에 http :'가 없습니다. –

+0

은'' –

+0

"/ 사과 "엔드 포인트를 맞출 때 반환되는 것을 출력 할 수 있습니까? –

답변

0

이 솔루션은 WebTuts 사이트에 있습니다. 이제는 작동하지만 AJAX 호출을 사용하지 않습니다. 나는 여전히 어떻게하는지 알고 싶어합니다. 그것은 해결책이며 동일한 결과를 얻었지만 명시 적으로 AJAX를 사용하는 방법에 대한 질문에 대답하지 않습니다. $ .ajax 섹션을이 seciton으로 바꿉니다.

$.getJSON("/apples?srch="+request.term,request, 
         function(data){ 
          var names = []; 
          $.each(data.result, function(i, val){ 
           names.push({ 
            label: val.name, 
            value: val.name, 
            data: val 
           }); 
          }); 
          response(names); 
         }); 

감사합니다! Jon

+0

이 코드가 SQL 주입 공격까지 사람들을 열 것이라고 들었습니다. 코드에서 어떻게됩니까? – Jon