質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1872閲覧

[jquery-ui] IE11でのAjax応答までに時間のかかるAutocompleteの挙動について

holysnowjp

総合スコア8

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/08/20 02:20

編集2018/08/20 03:48

内容

Jquery-uiのAutocompleteでSourceにAjaxを使用し、応答までの時間が3秒程度かかった場合
InternetExplorer11で
・検索終了時に予期しないblurイベント、forcusイベントが発生する
・結果が表示されない
等の症状が発生してしまいます。
検索結果が表示されないのはこのblurイベントで直ぐ消えてしまうものと思われます
実使用では応答までの大半は1秒未満ですが、条件設定によっては稀に3秒を超えてしまうものです
以下の検証用コードで動作確認した所、IEでは発生し、Chrome、Edgeでは発生しませんでした
設定によって回避する方法などはあるのでしょうか

JQuery バージョン

jQuery -v1.10.2
jQuery UI - v1.11.4

検証用のソースコード

実行サイト
http://wiki.holysnow.net/test/form.html

html

1<html> 2<head> 3<script src="external/jquery/jquery.js"></script> 4<script src="jquery-ui.js"></script> 5 <link href="jquery-ui.css" rel="stylesheet"> 6</head> 7<body> 8待機時間<input type="text" name="sleepTime" value="300" id="sleepTime"> 9<BR> 10autoComplete<input type="text" name="code" size="12" value="" id="code" style="ime-mode:inactive" class=""> 11<br /> 12<label id="errorMsg"></label> 13 14<style> 15.ui-autocomplete { 16 width:300px; 17 font-size:12px; 18 text-align:left; 19} 20</style> 21 22<script type="text/javascript"> 23 24$(document).ready(function() { 25 var LEN_MIN = 3; 26 // ログをクリア 27 $("#sleepTime").blur(function () { 28 $("#errorMsg").text(""); 29 }); 30 // 入力欄でブラー、フォーカスのイベントが発生した場合にログを出力 31 $("#code").blur(function () { 32 if($("#code").val() != ""){ 33 $("#errorMsg").html($("#errorMsg").html() + "<br/>blurイベント発生"); 34 } 35 }); 36 $("#code").focus(function () { 37 if($("#code").val() != ""){ 38 $("#errorMsg").html($("#errorMsg").html() + "<br/>focusイベント発生"); 39 } 40 }); 41 42 43 // autocompleteイベント 44 $("#code").autocomplete({ 45 source: function(request, response) { 46 $.ajax({ 47 type: "POST", 48 async: false, 49 url: "ajax.php", 50 dataType: "json", 51 data: { 52 sleepTime: $("#sleepTime").val() 53 }, 54 error: function(xhr, status, errorThrown) { 55 $("#errorMsg").text(xhr.responseText); 56 }, 57 success: function(data) { 58 $("#errorMsg").text(""); 59 response($.map(data,function(item){ 60 return{ 61 label:item.id + " " + item.value, 62 value:item.id 63 } 64 })); 65 } 66 }); 67 }, 68 minLength: LEN_MIN 69 }); 70}); 71</script> 72 73 74</body> 75</html>

php

1<?php 2 # 画面の指定時間待機後、応答を返すだけ 3 usleep($_POST['sleepTime'] * 1000); 4 $result = null; 5 6 header('Content-Type: application/json'); 7 for ($i = 10001 ; $i <= 10020;$i++){ 8 $result[] = array( 9 'id' => $i, 10 'value' => $_POST['sleepTime'] 11 ); 12 } 13 echo json_encode( $result ); 14 exit;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問