Ruby - jqueryオートコンプリートparse json

Question

マップjsonを解析してajaxオートコンプリート呼び出しに戻す正しい方法ですか？ 私は、jQueryが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 

Answer 1

あなたが欠けているように見える何JqueryUIから取られた結果は、ドロップダウンリストにあなたのコントローラから返さ

例を追加するjavasscriptです。 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 
       }, 

成功は、右のいずれかに見えるdoesntの見えます。私はhttp://jqueryui.com/demos/autocomplete/#remote-jsonpからビューソースをコピーして貼り付け、アプリケーションに合わせてカスタマイズします。