1

私はオートコンプリートのような機能に取り組んでいますが、まったく同じではありません。主な違いは、ajax によって返される一致する値が、別の div (ユーザーが入力している入力テキスト ボックスではない) のリストに表示されることです。

とにかく、この SO の質問からいくつかのコードを使用しました。ユーザーが入力を停止するまで .keyup() ハンドラーを遅らせる方法は? 、遅延を機能させるために。基本的に、キーを押すたびに、jQuery イベント ハンドラーが myDelay() を呼び出し、実行する関数とタイムアウトを与えます。次のキー押下までにタイムアウトが切れていない場合、トリガーするように設定されている機能は別の機能 (および新しいタイムアウト) に置き換えられます。

私の問題は、遅延を要求している関数が、成功ハンドラーを使用した jQuery ajax 呼び出しであることです。成功ハンドラーの値を変更すると、変更が親スコープに表示されません。

これが遅延機能です。グローバルスコープに存在します。

var myDelay = (function () {
    var timer = 0;
    return function (callback, ms){
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();

遅延を使用するコードは次のとおりです。

var mySearch = {
    publicSearch : function () {
        $('#publicSearch').keypress(function () {
            myDelay(function () {
                var list;
                var term = $('#publicSearch input[type=text]').val();
                if (term) {
                    $.getJSON('/search/public', { term : term }, function (data) {

                        // assign some value to `list` here
                    })
                } else {
                    list='Please type a term to search on';
                }
                $('#publicSearch div').html(list);
            }, 1000);
        });
    }
}

ajax 成功ハンドラーでは、値listを好きなものに設定できますが、親スコープには表示されません。$('#publicSearch div').html(list)div の内容を呼び出すと、null に設定されます。

単なるスコープの問題だと思いますが、解決できません。

遅延を使用するコードは mySearch 名前空間にあることに注意してください。これは、いくつかの異なるタイプの検索を構築する必要があり、コードを整理するためのメカニズムが必要だからです。

4

0 に答える 0