5

私はjqueryを初めて使用し、最近、必要に応じてjqueryコンボボックスを調整しました。ただし、このコンポーネントをサイトの他の場所で再利用する必要があります。基本的に、いくつかの引数と、jquery で特定のイベントを処理するために呼び出されるコールバック関数を渡す必要があります。私は構文に苦労しており、物事を行うjqueryの方法を見つけようとしています:

サンプルを提供するために、ここにのがsourceありcombobox -> input -> autocomplete -> sourceます：

（参照用に動作するjsfiddleを作成しました）

source: function( request, response ) {
    // implements retrieving and filtering data from the select
    var term = request.term;
    var prefixLength = 2;
    if (term.length >= prefixLength) {
        var abbreviation = term.substring(0, prefixLength);

        if(!(abbreviation.toLowerCase() in cache)){
            cache[abbreviation.toLowerCase()] = 1;

            $.ajax({
                url: "/wah/destinationsJson.action",
                dataType: "json",
                data: {
                    term: abbreviation
                },
                type: "GET",
                success: function(data) {
                    if(!data || !data.cities || !data.cities.length){
                        // response(["No matches for " + term]);
                        return;
                    } 
                    updateOptions(select, data.cities);
                    response(filterOptionsForResponse(select, term));
                    return;
                }
            });
        }
    }

    response(filterOptionsForResponse(select, term));
}

ここupdateOptions(...)に、filterOptionsForResponse(select, term)単純な JavaScript 関数があります。

source再利用するには、作成するコンボボックスのすべてのインスタンスを処理するコールバックを指定する必要があります。

誰かがこれを行う方法について正しい方向に向けることができますか?

4

1 に答える 1

8

唯一の有用なウィジェット ファクトリのドキュメントは wiki にあり、次のように書かれています。

プロパティ:
[...]
this.options
プラグイン構成に現在使用されているオプション。インスタンス化時に、ユーザーが提供するオプションはすべてデフォルト値と自動的にマージされます

したがって、 のコールバック関数を提供する必要がある場合はsource、次のように言います。

$("#searchbox").combobox({
    source: function(request, response) { /* ... */ }
});

次に、プラグイン内で次を見てくださいthis.options.source。

$.widget("ui.combobox", {
    options: {
        // Default options go here...
    },
    _create: function() {
        //...
        input = $("<input>").appendTo(wrapper).val(value).addClass("ui-state-default").autocomplete({
            source: this.options.source,
            //...

デフォルトのオプションを含める必要はありませんが、ほとんどの場合、含めることは理にかなっています (ドキュメントの目的でのみ使用する場合でも)。

于 2012-06-01T06:48:04.600 に答える