内容
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;
あなたの回答
tips
プレビュー