jQuery UI autocompleteでajax通信を途中で中断する方法

Question

inputタグに入力した内容から候補表示を行うautocompleteを使っているのですが、inputタグ内に一度文字を入力した後に、候補表示される前に(success前に)文字列を削除してinputタグが空白となった場合には、一度投げたajax通信を途中で中断するようにしたいのですが、中断出来ません。
(候補が出力される前にinputタグを空白にした時点で、一度"error"がコンソール出力されて、そのまま待機していると再度"error"がコンソール出力されてしまいます。)
inputタグ内を空白にした時点でajax通信を完全に中断する方法を御教示下さい。

		$(function(){
			var jqxhr;
			$(document).keyup(function(){
				if($("#input").val()==""){
					if(jqxhr){
						jqxhr.abort();
					}
				}

				$("#input").autocomplete({
					source: function(req, resp){
						jqxhr = $.ajax({
							url: "autocomplete.php",
							type: "POST",
							cache: false,
							dataType: "json",
							data: {
								name: req.term
							},
							success: function(o){
								resp($.map(o, function(item) {
									return {
										label: item.name,
										value: item.name
									}
								}));
							},
							error: function(xhr, ts, err){
								//エラー時の処理
                                console.log("error");
							}
						});
					},
					select: function(event, ui){
                   //候補から選んだ時の処理
					}
				});
			});
		});

<input id="input" type="text" name="name" value="">

Answer 1

こうしてみてはどうなりますか？

if($("#input").val()==""){
    if(jqxhr){
        jqxhr.abort();
    }
    return false; // ADD
} // 未テスト

---

追記：（2017/06/01編集）

$(function(){
	var jqxhr;
	var count = 0;
	$("#input").autocomplete({
		source: function(req, resp){
			count++;
			var ct = count;
			console.log( 'set:' + ct + ' / req:' + req.term );
			if(jqxhr){
				jqxhr.abort();
			}
			if(req.term==""){
				return false;
			}
			jqxhr = $.ajax({
				url: "autocomplete.php",
				type: "POST",
				cache: false,
				dataType: "json",
				data: {
					name: req.term
				},
				success: function(o){
					console.log( 'success:' + ct + ' / req:' + req.term);
					resp($.map(o, function(item) {
						return {
							label: item.name,
							value: item.name
						}
					}));
				},
				error: function(xhr, ts, err){
					console.log( 'error:' + ct + ' / req:' + req.term);
					//エラー時の処理
					console.log("error");
				}
			});
		},
		select: function(event, ui){
			//候補から選んだ時の処理
		}
	});
}); // 未テスト

Comments

[k.t.est]

やってみましたが、同じく２度"error"がコンソール出力されてしまいました。

[kei344]

あ、というかkeyupイベントのたびにautocompleteを設定していることになるので、妙なことになる可能性があります。

keyupイベントを使わずに、source: function(req, resp){}から渡す値が空であればAjaxに渡さないように設定するほうが良いかもしれません。

[k.t.est]

修正した(keyupイベントも削除)ところ、inputタグの入力内容を削除し空白になった時点ではerrorはコンソール出力されなくなりましたが、しばらくそのまま放置するとerrorがコンソール出力されてしまいました。ajax通信は中断はできていなさそうです。

[kei344]

とりあえずどれがエラーになっているかを特定してみてはいかがでしょう。

[k.t.est]

修正したところ、文字列入力(mgと入力しました)時に
set : 1 / req : mg がコンソール出力され、
その後、文字列を削除してinputタグ内をブランクにし、そのまま放置してしばらくすると、
error : 1 / req : mg
error　とコンソール出力されました。
最初に入力した文字列が削除しても、そのままajax通信は継続して行われているということかと存じます。

[kei344]

「文字列を削除してinputタグ内をブランクにし」の際にset : 2は通っていないのでしょうか。

[k.t.est]

仰る通りです。ブランクにした際にはset : 2が通っておりませんので、ブランクになった際(及び削除途中)時にautocompleteが作用していないということかと存じます。

[k.t.est]

ちなみにブランクにした後に、再度mgと入力すると、set : 2が通りました。

[k.t.est]

その際に、error:1 / req:mgと出ましたので、再度入力した際に、set : 1が中断されていると思われます。

[kei344]

$("#input").keyup(function(){}); で文字列が無い場合に jqxhr.abort(); するとかどうでしょう。

[k.t.est]

有難うございました。無事中断させることに成功致しました。