2012-05-04 2 views
0

이것은 json이 ajax 자동 완성 호출로 반환 된 구문 분석에 올바른 방법입니까? jQuery가 json 응답을 인식하고 자동 완성 항목을 나열하기 위해 스크립트에서 추가 작업이 필요하지 않을 것으로 예상했습니다.루비 레일 - jquery autocomplete parse json

JSON -

[{"issue":"Item returned"}] 

JS -

$("#term").autocomplete({ 
     source: function(request, response){ 
     $.ajax({ 
       url: '/issue/issue_type', 
       type: 'POST', 
       dataType: 'json', 
       data: { issue_code : $("#term").val() }, 
       headers: { 'X-CSRF-Token': '<%= form_authenticity_token.to_s %>' }, 
       success: function(data) { response($.map(data.issue, function(issue){ 
       return { 
       value: data.issue 
       } 
       })); } 
      }); 
     }, 
     minLength: 2, 
     select: function(event, ui){ 
     // 
       } 
     }); 
     }); 

success: function(data) { response(data); }을 시도했다. 어느 쪽도 일하지 않았다.

컨트롤러 -

당신이없는 것 같습니다 무엇
def issue_type 
     @c = Codes.select("issue").where("codes.issue LIKE :i",{:i => "#{params[:posted_code]}%"}) 
     puts @c.to_json 
     respond_to do |format| 
     format.json { render :json=> @c.to_json } 
     format.js 
     end 
     return @c.to_json 
     end 
+0

'url :'/ issue/issue_type, '견적이 누락되었습니다. 그것은 : 'url :'/ issue/issue_type ',' – Mischa

+0

@Mischa - Ohh는 코드 게시의 오타였습니다. 나는 ajax json 응답을 얻었지만 autocomplete 목록에는 나열되지 않습니다. –

+0

잘 자동 완성 HTML 모양은 무엇입니까? 선택 : 기능 ... 자동 완성 목록에 응답이 추가되는 곳입니다. 비어 있으면 결과가 표시되지 않습니다. – Mike

답변

0

이 결과 목록 JqueryUI에서 촬영

예를 드롭 다운에 컨트롤러에서 반환 추가 할 수있는 자바 스크립트에이다; http://jqueryui.com/demos/autocomplete/#remote-jsonp

#function to write 'selected: <selection>' in demo 
function log(message) { 
     $("<div/>").text(message).prependTo("#log"); 
     $("#log").scrollTop(0); 
    } 
#when user selects from drop down passes selected value to log function 
select: function(event, ui) { 
      log(ui.item ? 
       "Selected: " + ui.item.label : 
       "Nothing selected, input was " + this.value); 
     }, 




    # i think this is CSS to make the drop down list appear/disappear 
open: function() { 
      $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
     }, 

close: function() { 
      $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
     } 

이 항목은 비어 있거나 없습니다. 로그 기능은 요구 사항이 아니지만 선택시 JavaScript를 사용하여 텍스트 필드에 선택 항목을 표시해야합니다. 데이터가 올바른 형식의없는 것처럼

은 또한 그것은

data: { 
        featureClass: "P", 
        style: "full", 
        maxRows: 12, 
        name_startsWith: request.term 
       }, 

성공은 바로 하나 찾아 나던 보인다. 난 그냥 http://jqueryui.com/demos/autocomplete/#remote-jsonp에서보기 소스를 복사하여 붙여 넣기하고 응용 프로그램에 맞게 사용자 정의합니다.