1

Jquery UI Autocompleteを使用して、 Thesaurus APIを使用して任意の単語の同義語を取得しようとしています。

API にアクセスするには、次の json GET リクエストを作成する必要があります

http://words.bighugelabs.com/api/{version}/{api key}/{word}/{format}

ただし、Jquery は以下を生成し、404 Not Found 

http://words.bighugelabs.com/api/?v=2&key=mykey&word=some-word&format=json

セパレーターは簡単に外せますか？

脚本

$(function() {
        function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }

        $( "#thesaurus" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://words.bighugelabs.com/api/",
                    dataType: "json",
                    data: {
                        v: "2",
                        key: "mykey", //actually numbers
                        word: request.term,
                        format: "json"
                        //maxRows: 12,
                        //name_startsWith: request.term
                    },
                    success: function( data ) {
                        response( $.map( data.geonames, function( item ) {
                            return {
                                label: item.name + (item.noun ? ", " + item.noun : "") + ", " + item.syn,
                                value: item.name
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    });

HTML

    <input id="thesaurus" />

</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
4

3 に答える 3

2

関数の data パラメーターの要点は$.ajax()、クエリ文字列を作成することです (POST と GET の両方がクエリ文字列を使用し、それらは要求ペイロードの別の部分として送信されるだけです)。単純な文字列連結を使用して URL を作成したいだけです。

$.ajax({
    url: "http://words.bighugelabs.com/api/2/mykey/" + request.term + "/json",
    dataType: "json",
    success: function( data ) {
        response( $.map( data.geonames, function( item ) {
            return {
                label: item.name + (item.noun ? ", " + item.noun : "") + ", " + item.syn,
                value: item.name
            }
        }));
    }
});

静的なバージョン、API キー、および形式パラメーターがありましたが、それらが動的である場合、URL は次のようになります。

"http://words.bighugelabs.com/api/" + version + "/" + api_key + "/" + request.term + "/" + format

コードを少しきれいにするために、次のようにすることもできます。

"http://words.bighugelabs.com/api/" + [version,api_key,request.term,format].join("/")
于 2012-06-23T17:03:28.790 に答える
1

データを URL に移動:

    $( "#thesaurus" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://words.bighugelabs.com/api/2/" + "mykey/" + request.term + "/json",
                ....
            });
        },
于 2012-06-23T17:02:35.497 に答える
1

あなたはただ使うことができます

url:"http://words.bighugelabs.com/api/"
           +"2/"+encodeURIComponent(mykey)+"/"
           +encodeURIComponent(request.term)+"/json"),

そして、dataオプションを削除します。

于 2012-06-23T17:06:43.083 に答える