この空白リストをmaterializecssオートコンプリートに表示する方法（Internet Explorer）

Question

オートコンプリートリストが巨大な場合、Internet Explorerに空白のdivが表示されます。 小さなリストの場合は正常に動作します。

再現手順： -

1. チェックこのcodepen： - インターネット Explorerの codepenForBlankListInMaterializeAutocomplete（バージョン9.11）。
2. テキストボックスにAを書き込みます。
3. Apple/Apple00/Apple01 ....のリストを参照してください。
4. アップルをお選びください
5. 空白のリストが表示されていることをご確認ください。

頭部： -

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta name="msapplication-tap-highlight" content="no" /><title>Test for Autocomplete</title> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"/> 

コードHTML： -

<div class="row"> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <i class="material-icons prefix">textsms</i> <input type="text" id="autocomplete-input" class="autocomplete"> <label for="autocomplete-input">Autocomplete</label> </div> </div> </div> </div>

スクリプト： -

$(function() { 
    $('input.autocomplete').autocomplete({ 
     data: { 
      "Apple": null, 
      "Apple00": null, 
      "Apple01": null, 
      "Apple02": null, 
      "Apple03": null, 
      "Apple04": null, 
      "Apple05": null, 
      "Apple07": null, 
      "Apple08": null, 
      "Apple09": null, 
      "Apple10": null, 
      "Apple11": null, 
      "Apple12": null, 
      "Apple13": null, 
      "Apple14": null, 
      "Apple15": null, 
      "Apple16": null, 
      "Apple17": null, 
      "Apple18": null, 
      "Apple19": null, 
      "Apple20": null, 
      "Apple21": null, 
      "Apple22": null, 
      "Apple23": null, 
      "Apple24": null, 
      "Apple25": null, 
      "Apple27": null, 
      "Apple28": null, 
      "Apple29": null, 
      "Apple30": null, 
      "Apple31": null, 
      "Apple32": null, 
      "Apple33": null, 
      "Apple34": null, 
      "Apple35": null, 
      "Apple36": null, 
      "Apple37": null, 
      "Apple38": null, 
      "Apple39": null, 
      "Apple40": null, 
      "Apple41": null, 
      "Apple42": null, 
      "Apple43": null, 
      "Apple44": null, 
      "Apple45": null, 
      "Apple47": null, 
      "Apple48": null, 
      "Apple49": null, 
      "Apple50": null, 
      "Apple51": null, 
      "Apple52": null, 
      "Apple53": null, 
      "Apple54": null, 
      "Apple55": null, 
      "Apple56": null, 
      "Apple57": null, 
      "Apple58": null, 
      "Apple59": null, 
      "Microsoft": null, 
      "Google": 'http://placehold.it/250x250' 
     } 
    }); 

});  

親切に示唆この空白を取り除く方法。

注：これは、Chromeで正常に動作

Answer 1

を追加することができ、追加のハンドラの一片以下IE.Thisのバグのように思えます。

$('.autocomplete-content').on('click', 'li', function() {    
    $('.autocomplete-content').hide(); 
}); 

$('input.autocomplete').on('keyup',function(){ $('.autocomplete-content').show();}) 

このコードはKeyupのドロップダウンを表示し、選択時に非表示にします。

コデペン：http://codepen.io/anon/pen/jrJEjZ?editors=1111