0

これは、ajax オートコンプリート呼び出しに返されたマップ json を解析する正しい方法ですか? 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
4

1 に答える 1

0

欠落しているように見えるのは、コントローラーから返された結果をドロップダウンリストに追加するためのjavasscriptです。

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からビューソースをコピーして貼り付け、アプリケーションに合わせてカスタマイズします。

于 2012-05-04T04:16:55.150 に答える