私はオートコンプリートのような機能に取り組んでいますが、まったく同じではありません。主な違いは、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 名前空間にあることに注意してください。これは、いくつかの異なるタイプの検索を構築する必要があり、コードを整理するためのメカニズムが必要だからです。