私はリモートデータソースからのデータでjQuery UIオートコンプリートを使用しています。私のユースケースは、ここでは一例には本当に似ていますjQuery UI-オートコンプリートメニューがキーストローク間で一時的に消えないようにするにはどうすればよいですか？
http://jqueryui.com/demos/autocomplete/#remote
唯一の違いは、私は、キーストロークの間では0に私の遅延を設定することで、メニューは約1/10秒〜100milliのために消えます更新されたオートコンプリートリストが表示される秒数。
キーストロークの間にメニューが一時的に消えるのを防ぐことができますか？良いユースケースはgoogleの検索で、キーストロークの間に、提案ボックスが一時的に消えない。
IMOでは、リモートデータソースを使用するときに遅延をゼロに設定することはお勧めできません。必要以上に多くのリクエストが送信され、サーバーには何のメリットもありません。
とにかく、あなた自身がコールバックとしてsourceオプションを定義することで、あなたが望むものを達成できると思います。
最初に少しの説明。私はあなたがプラグインのソースとしてURLを渡すリモート機能を使用していると思います。プラグインは、実際にこの方法を実装するコールバックにこれをラップ：
// in case the option "source" is a string
url = this.options.source;
this.source = function(request, response) {
if (self.xhr) {
self.xhr.abort();
}
self.xhr = $.ajax({
url: url,
data: request,
dataType: "json",
autocompleteRequest: ++requestIndex,
success: function(data, status) {
if (this.autocompleteRequest === requestIndex) {
response(data);
}
},
error: function() {
if (this.autocompleteRequest === requestIndex) {
response([]);
}
}
});
};
あなたが見ることができるように、起こってAJAXリクエストは、それはそれをabordsすでに存在する場合。このようなご要望にお応えするには、ご利用のサーバーができるだけ早く、の時間がになり、遅延がゼロになります。
if (self.xhr) {
self.xhr.abort();
}
これは実際には、空のデータセットにそれ自体responseコールバックを実行する中断された要求のエラーコールバックを実行します。あなたが応答コールバックを見れば、データが空の場合、それはメニューを閉じます。
_response: function(content) {
if (!this.options.disabled && content && content.length) {
...
} else {
this.close();
}
あなたが実際にあなたのAJAX要求を自分で作ると、保留中のを中断しないことにより、デフォルトの動作を変更するために、独自のsourceコールバックを定義することができます要求。次のようなもの：
$('#autocomplete').autocomplete({
source: function(request, response) {
$.ajax({
url: url,
data: request,
dataType: "json",
success: function(data, status) {
// display menu with received dataset
response(data);
},
error: function() {
// close the menu on error by executing the response
// callback with an empty dataset
response([]);
}
});
}
});